/* Estilos globales del rediseño 2026 — SCImago EPI Core
   ======================================================
   Cómo activarlos (dos opciones, compatibles entre sí):

   1. En Elementor, añadir la clase  epi-2026-start  a la PRIMERA sección
      del diseño nuevo (Avanzado > Clases CSS). Los estilos se aplican a esa
      sección y a todas las que van DEBAJO de ella (hermanas siguientes).
      Ideal mientras convivan bloque antiguo (arriba) y nuevo (debajo)
      en la misma página.

   2. Añadir la clase  epi-2026  a cualquier contenedor/sección suelta
      (p. ej. la plantilla completa cuando ya no haya parte antigua).

   Utilidades opcionales:
   - epi-card        → tarjeta gris claro redondeada (columnas de producto)
   - epi-btn-negro   → botón píldora negro (para fondos naranjas)

   La fuente exacta del Figma está pendiente de confirmar: cambiarla en
   --epi-font-2026 (una sola línea). */

:root {
	--epi-naranja: #F5A81C;
	--epi-naranja-hover: #DD9509;
	--epi-negro: #080602;          /* Figma: color/text/primary */
	--epi-gris-texto: #4A4A4A;
	--epi-gris-card: #F0EFEC;      /* fondo de tarjetas */
	--epi-fondo: #F8F7F5;          /* fondo del body */
	--epi-borde-suave: #ECECE8;
	--epi-radio-card: 16px;
	--epi-radio-pill: 999px;
	/* Fuente del Figma: Riforma LL TT (Lineto, licencia comercial).
	   Si no está cargada como webfont, caen los fallbacks. */
	--epi-font-2026: 'Riforma LL TT', 'Riforma LL', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Fondo de página (#F8F7F5) ----------
   Se aplica a las secciones nuevas; las que tienen fondo propio en Elementor
   (naranja de Noticias/Contact us, banner) lo conservan porque su CSS
   generado es más específico. */

body {
	background-color: var(--epi-fondo) !important;
}

/* TheGem pinta #page en blanco; en las páginas del rediseño (con secciones
   epi-2026) debe verse el fondo crema para que no quede una franja blanca
   entre el header y el primer bloque. */
body:has(.epi-2026-start) #page,
body:has(#epi-2026-start) #page,
body:has(.epi-2026) #page {
	background-color: var(--epi-fondo) !important;
}

/* ---------- Tipografía ---------- */

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-heading-title,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) :is(h1, h2, h3, h4, h5, h6) {
	/* Figma: headings en Riforma LL TT Regular (400), tracking -2% */
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) h1,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(36px, 4.5vw, 56px) !important;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) h2,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(28px, 3vw, 40px) !important;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) h3,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-widget-heading h3.elementor-heading-title {
	font-size: clamp(20px, 2vw, 24px) !important;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) :is(h4, h5),
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-widget-heading :is(h4, h5).elementor-heading-title {
	font-size: clamp(18px, 1.6vw, 22px) !important;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) p,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-widget-text-editor {
	font-family: var(--epi-font-2026);
	/*color: var(--epi-gris-texto);*/
	color:rgba(8, 6, 2, 1);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Botones (Elementor y TheGem) ---------- */

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-button,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next) {
	background-color: var(--epi-naranja) !important;
	color: var(--epi-negro) !important;
	border: none !important;
	border-radius: var(--epi-radio-pill) !important;
	padding: 14px 28px !important;
	font-family: var(--epi-font-2026) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	transition: background-color .2s ease;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-button:hover,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-button:focus,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next):hover,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next):focus {
	background-color: var(--epi-naranja-hover) !important;
	color: var(--epi-negro) !important;
}

/* Flecha ↗ al final del texto del botón (quitar esta regla si molesta) */
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-button .elementor-button-text::after {
	content: " \2197";
	font-weight: 700;
}

/* Variante: botón blanco para fondos naranjas (hero de Agenda) */
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .epi-btn-blanco .elementor-button,
.epi-btn-blanco .elementor-button {
	background-color: #ffffff !important;
	color: var(--epi-negro) !important;
}
.epi-btn-blanco .elementor-button:hover,
.epi-btn-blanco .elementor-button:focus {
	background-color: var(--epi-gris-card) !important;
	color: var(--epi-negro) !important;
}

/* TEMPORAL (06-08-2026) — ocultar el botón "Agenda clásica" del hero de
   /agenda-epi/ mientras se decide si se mantiene.
   El widget SIGUE en la BD y en plantillas-claude/agenda-2026-estructura.json
   (sección epi-hero-agenda → columna 0 → widget button, clase epi-btn-blanco):
   aquí solo se oculta, no se borra nada. Para recuperarlo, borrar este bloque.
   El :not(.epi-hero-lista) evita afectar a los heros de Listas de correo, que
   reutilizan la clase epi-hero-agenda. */
.epi-hero-agenda:not(.epi-hero-lista) .epi-btn-blanco {
	display: none !important;
}

/* Variante: botón negro para fondos naranjas */
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .epi-btn-negro .elementor-button,
.epi-btn-negro .elementor-button {
	background-color: var(--epi-negro) !important;
	color: #ffffff !important;
}
.epi-btn-negro .elementor-button:hover {
	background-color: #3a3a3a !important;
}

/* ---------- Círculo naranja delante de los títulos de sección (h2) ----------
   Nota: borrar el carácter "· " escrito en el texto de los títulos en
   Elementor para que no salga duplicado. */

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) h2.elementor-heading-title::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--epi-naranja);
	margin-right: 16px;
	vertical-align: middle;
}

/* ---------- Listas de enlaces (icon-list: "Link opcional de interés") ---------- */

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-icon-list-item a,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-icon-list-text {
	font-family: var(--epi-font-2026);
	color: var(--epi-negro) !important;
	font-weight: 500;
}

/* Figma: la flecha va DETRÁS del texto → se oculta el icono delantero
   del widget y se añade la flecha ↗ al final con ::after */
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-icon-list-icon {
	display: none !important;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-icon-list-text::after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 10px;
	vertical-align: -2px;
	background: url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / contain no-repeat;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-icon-list-item a:hover .elementor-icon-list-text,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-icon-list-item a:hover {
	color: var(--epi-naranja-hover) !important;
}

/* ---------- Menú de cabecera: quitar el borde blanco del ítem activo ----------
   TheGem (custom-*.css generado por Theme Options) pinta un  border: 2px solid
   #fff  en el enlace del ítem de menú actual (li.menu-item-current > a, y sus
   variantes active/ancestor). En la cabecera blanca del rediseño 2026 ese borde
   queda como una "caja fantasma" alrededor del padre (p. ej. Publicaciones) al
   navegar a una subpágina. Lo dejamos transparente (mantener el ancho 2px evita
   el salto de layout). El override gana por !important (la regla de TheGem no lo
   lleva). */
#primary-menu li.menu-item-current > a,
#primary-menu li.menu-item-active > a,
#primary-menu li.current-menu-item > a,
#primary-menu li.current-menu-ancestor > a,
#primary-menu li.current-menu-parent > a,
#primary-menu li.current_page_item > a,
#primary-menu li.current_page_ancestor > a,
#primary-menu li.current_page_parent > a {
	border-color: transparent !important;
}

/* ---------- Acordeón FAQs ---------- */

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-accordion-item {
	background-color: #ffffff;
	border: none;
	border-radius: 16px;
	margin-bottom: 8px;   /* Figma: gap 8px entre FAQs */
	overflow: hidden;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-tab-title {
	padding: 20px 24px;
	font-family: var(--epi-font-2026) !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	color: var(--epi-negro) !important;
	border: none !important;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-tab-content {
	padding: 0 24px 20px;
	border: none !important;
	color: var(--epi-gris-texto);
	font-family: var(--epi-font-2026);
}

/* Icono del acordeón: flecha arrow-down.svg a la DERECHA.
   Cerrado: flecha 20px sin fondo. Abierto: círculo 40px #E0DED7 con
   la flecha girada hacia arriba. */

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-tab-title a {
	flex: 1;
	order: 1;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-accordion-icon {
	order: 2;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent url('/wp-content/uploads/2026/07/arrow-down.svg') center / 20px 20px no-repeat;
	transition: transform .25s ease, background-color .25s ease;
	float: none !important;
}

/* Ocultar los iconos de fuente propios de Elementor */
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-accordion-icon i,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-accordion-icon svg,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-accordion-icon span {
	display: none !important;
}

/* Abierto: círculo gris y flecha hacia arriba */
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background-color: #E0DED7;
	transform: rotate(180deg);
}

/* ---------- Utilidad: tarjeta gris (añadir a la columna en Avanzado > Clases CSS) ---------- */

.epi-card {
	background-color: var(--epi-gris-card) !important;
	border-radius: var(--epi-radio-card);
	padding: 32px !important;
	box-sizing: border-box;
}

/* Columnas de Elementor con la clase: aplicar al wrap interno para que
   la tarjeta llene la columna. !important porque Elementor genera el fondo
   blanco de la columna con un selector más específico. */
.elementor-column.epi-card > .elementor-widget-wrap,
.elementor-column.epi-card > .elementor-element-populated,
.elementor-element.epi-card > .elementor-widget-wrap,
.e-con.epi-card {
	background-color: var(--epi-gris-card) !important;
	border-radius: var(--epi-radio-card) !important;
	padding: 32px !important;
}
.elementor-column.epi-card,
section.elementor-section .elementor-column.epi-card {
	background-color: transparent !important;
	padding: 4px !important;   /* Figma: gap 8px entre tarjetas */
}

/* Responsive GRADUAL de las tarjetas de la home (Publicaciones, Eventos,
   Comunidad → clase .epi-card; Síguenos → clase .epi-card-red).
   Por defecto TheGem apila las columnas a 1 por fila en ≤1024px (y a anchos
   intermedios el gap de columna hace que 2×50% desborde y se envuelvan).
   En vez de pelear con anchos flex, convertimos la fila que contiene estas
   tarjetas en CSS grid: 2 columnas en ≤1024px y 1 en ≤767px. Las tarjetas
   al 100% (e-LIS, Agenda; .elementor-col-100) ocupan la fila completa.
   El gap visual (8px) lo siguen dando los 4px de padding de cada columna. */
@media (max-width: 1024px) {
	.elementor-row:has(> .elementor-column.epi-card),
	.elementor-row:has(> .elementor-column.epi-card-red) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.elementor-row > .elementor-column.epi-card,
	.elementor-row > .elementor-column.epi-card-red {
		width: auto !important;
		max-width: none !important;
	}
	.elementor-row > .elementor-column.epi-card.elementor-col-100 {
		grid-column: 1 / -1 !important;
	}
}
@media (max-width: 767px) {
	.elementor-row:has(> .elementor-column.epi-card),
	.elementor-row:has(> .elementor-column.epi-card-red) {
		grid-template-columns: 1fr !important;
	}
}

/* Modificador: tarjeta SIN círculo de flecha (p. ej. Sobre nosotros).
   Añadir  epi-sin-flecha  junto a epi-card en la columna. */
.elementor-column.epi-card.epi-sin-flecha > .elementor-widget-wrap::after,
.elementor-column.epi-card.epi-sin-flecha > .elementor-element-populated::after,
.e-con.epi-card.epi-sin-flecha::after {
	display: none !important;
}

/* Círculo blanco con flecha ↗ al final de cada tarjeta gris */
.elementor-column.epi-card > .elementor-widget-wrap::after,
.elementor-column.epi-card > .elementor-element-populated::after,
.e-con.epi-card::after {
	content: '';
	display: block;
	width: 44px;
	height: 44px;
	margin-top: 24px;
	border-radius: 50%;
	background: #ffffff url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / 16px 16px no-repeat;
}

/* ---------- Imágenes redondeadas (columnas de imagen, noticia destacada) ---------- */

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-widget-image img {
	border-radius: var(--epi-radio-card);
}

/* ---------- Utilidad: esquinas redondeadas grandes (tarjeta naranja de Noticias, banners) ---------- */

.epi-redondeado,
.elementor-column.epi-redondeado > .elementor-widget-wrap,
.elementor-column.epi-redondeado > .elementor-element-populated,
section.elementor-section.epi-redondeado {
	border-radius: 24px !important;
	overflow: hidden;
}

/* ---------- Sección Noticias (hero secundario) ----------
   Añadir la clase  epi-noticias  a la sección. Estructura esperada:
   columna 1 = tarjeta naranja (label, título, extracto, cursores/botón),
   columna 2 = imagen ESTÁTICA (no forma parte del slider). */

section.epi-noticias > .elementor-container,
section.epi-noticias .elementor-row {
	min-height: 484px;   /* Figma: alto 484px */
	align-items: stretch;
}

.epi-noticias .elementor-column > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;            /* Figma: gap 24px entre textos */
	min-height: 484px;
	padding: 48px;
	box-sizing: border-box;
}

/* Título del slider: Riforma regular 40px / 48px */
.epi-noticias .elementor-widget-heading .elementor-heading-title {
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 48px !important;
}

/* Cursores (o botón) siempre abajo del todo de la tarjeta */
.epi-noticias .elementor-column > .elementor-widget-wrap > .elementor-element:last-child {
	margin-top: auto;
}

/* Columna de imagen: fija, llena el alto, sin padding de tarjeta */
.epi-noticias .elementor-column:last-child > .elementor-widget-wrap {
	padding: 0;
	gap: 0;
}

.epi-noticias .elementor-column:last-child .elementor-widget-image,
.epi-noticias .elementor-column:last-child .elementor-widget-image .elementor-widget-container {
	height: 100%;
}

.epi-noticias .elementor-column:last-child .elementor-widget-image img,
.epi-noticias .elementor-column:last-child img {
	width: 100%;
	height: 484px;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--epi-radio-card);
}

/* ----- Blog Slider de TheGem dentro de la tarjeta naranja -----
   (widget "Blog Slider" de TheGem Elements: los editores lo usan igual
   que en la home antigua; aquí solo se re-estiliza) */

.epi-noticias .gem-blog-slider .gem-slider-item-image,
.epi-noticias .gem-blog-slider-preloader {
	display: none !important;
}

.epi-noticias .gem-blog-slider .gem-slider-item-overlay {
	position: static !important;
	width: 100% !important;
	height: auto !important;
	background: transparent !important;
	padding: 0 !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column;
	flex-grow: 1;
}

/* Título del post: Riforma regular 40/48, oscuro, sin fecha delante */
.epi-noticias .gem-blog-slider .post-title h5,
.epi-noticias .gem-blog-slider .post-title h5 a,
.epi-noticias .gem-blog-slider .post-title h5 .light {
	font-family: var(--epi-font-2026) !important;
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 48px !important;
	color: var(--epi-negro) !important;
	text-transform: none !important;
}

.epi-noticias .gem-blog-slider .entry-title-date {
	display: none !important;
}

/* Extracto */
.epi-noticias .gem-blog-slider .post-text,
.epi-noticias .gem-blog-slider .post-text .summary,
.epi-noticias .gem-blog-slider .post-text p {
	color: #33302a !important;
	font-family: var(--epi-font-2026);
	font-size: 16px;
	line-height: 1.6;
}

/* Autor / comentarios / likes fuera */
.epi-noticias .gem-blog-slider .post-meta {
	display: none !important;
}

/* El overlay hace de tarjeta: columna flex con alto mínimo para que
   los cursores (margin-top:auto) queden abajo. No se toca la estructura
   interna del carrusel (carouFredSel calcula alturas por JS). */
.epi-noticias .gem-blog-slider .gem-slider-item-overlay {
	min-height: 338px;
}

/* carouFredSel fija la altura por JS con medidas obsoletas: se fuerza por CSS
   (338 + label + gap + padding = 484 exactos de tarjeta) */
.epi-noticias .caroufredsel_wrapper,
.epi-noticias .gem-blog-slider article {
	height: 338px !important;
}

/* Cursores: círculos de 44px pegados abajo del cuadro naranja.
   Activo (next): fondo #F0EFEC con arrow-slider.svg (→).
   Desactivado (prev): blanco al 40%, misma flecha girada 180°. */
.epi-noticias .gem-blog-slider .gem-blog-slider-navigation {
	margin-top: auto !important;
	padding-top: 24px;
	display: flex;
	
}

.epi-noticias .gem-blog-slider .gem-blog-slider-prev,
.epi-noticias .gem-blog-slider .gem-blog-slider-next {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: url('/wp-content/uploads/2026/07/arrow-slider.svg') center / 24px 24px no-repeat !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.epi-noticias .gem-blog-slider .gem-blog-slider-prev {
	background-color: rgba(255, 255, 255, 0.4) !important;
	transform: rotate(180deg);
}

.epi-noticias .gem-blog-slider .gem-blog-slider-next {
	background-color: rgba(240, 239, 236, 1) !important;
}

.epi-noticias .gem-blog-slider .gem-blog-slider-prev:hover,
.epi-noticias .gem-blog-slider .gem-blog-slider-next:hover {
	background-color: #ffffff !important;
}

/* Se ocultan los iconos de fuente configurados en el widget */
.epi-noticias .gem-blog-slider .gem-blog-slider-prev i,
.epi-noticias .gem-blog-slider .gem-blog-slider-prev svg,
.epi-noticias .gem-blog-slider .gem-blog-slider-next i,
.epi-noticias .gem-blog-slider .gem-blog-slider-next svg {
	display: none !important;
}

/* Responsive: tarjeta arriba e imagen debajo en vertical, SOLO cuando
   aparece el menú responsive (mismo breakpoint: 1023px) */
@media (max-width: 1023px) {
	section.epi-noticias .elementor-row,
	section.epi-noticias > .elementor-container {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		min-height: 0;
	}
	/* la imagen debe verse siempre debajo aunque la columna tenga
	   "ocultar en tablet/movil" en Elementor */
	.epi-noticias .elementor-column.elementor-hidden-tablet,
	.epi-noticias .elementor-column.elementor-hidden-phone,
	.epi-noticias .elementor-column.elementor-hidden-mobile {
		display: flex !important;
	}
	.epi-noticias .elementor-column {
		width: 100% !important;
	}
	.epi-noticias .elementor-column > .elementor-widget-wrap {
		min-height: 0;
		padding: 32px;
	}
	.epi-noticias .elementor-column:last-child > .elementor-widget-wrap {
		padding: 0;
		margin-top: 8px;
		/* si la imagen es fondo de columna, sin contenido el alto seria 0 */
		min-height: 320px;
	}
	.epi-noticias .elementor-column:last-child {
		min-height: 320px;
		border-radius: var(--epi-radio-card);
		overflow: hidden;
	}
	.epi-noticias .elementor-column:last-child .elementor-widget-image,
	.epi-noticias .elementor-column:last-child .elementor-widget-image .elementor-widget-container {
		height: auto;
	}
	.epi-noticias .elementor-column:last-child .elementor-widget-image img,
	.epi-noticias .elementor-column:last-child img {
		height: 320px;
		display: block;
	}
	.epi-noticias .gem-blog-slider .gem-slider-item-overlay {
		min-height: 340px;
	}
	.epi-noticias .caroufredsel_wrapper,
	.epi-noticias .gem-blog-slider article {
		height: 340px !important;
	}
	.epi-noticias .gem-blog-slider .post-title h5,
	.epi-noticias .gem-blog-slider .post-title h5 a,
	.epi-noticias .gem-blog-slider .post-title h5 .light,
	.epi-noticias .elementor-widget-heading .elementor-heading-title {
		font-size: 28px !important;
		line-height: 36px !important;
	}
}

/* ---------- Redes sociales (Síguenos): círculos #E0DED7 con icono oscuro ---------- */

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .epi-social a.epi-social__link {
	background-color: #E0DED7 !important;
	color: var(--epi-negro) !important;
}

:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .epi-social a.epi-social__link:hover,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .epi-social a.epi-social__link:focus {
	background-color: var(--epi-naranja) !important;
	color: var(--epi-negro) !important;
}

/* ---------- Contact us: gap de 8px entre columna naranja y formulario ---------- */

.epi-contacto > .elementor-container > .elementor-row,
.epi-contacto > .elementor-container {
	display: flex;
	gap: 8px;
}

.epi-contacto .elementor-column {
	flex: 1 1 0;
	width: auto !important;
}

/* Responsive: por debajo de 786px, una sola columna — primero la tarjeta
   naranja a todo el ancho y debajo el formulario a todo el ancho. */
@media (max-width: 786px) {
	.epi-contacto > .elementor-container > .elementor-row,
	.epi-contacto > .elementor-container {
		flex-direction: column;
	}
	.epi-contacto .elementor-column {
		flex: 1 1 100%;
		width: 100% !important;
	}
}

/* ---------- Utilidad: flecha ↗ de las tarjetas ----------
   Añadir un widget Imagen con /uploads/2026/07/arrow-corner-right-up.svg
   y ponerle la clase  epi-flecha  (Avanzado > Clases CSS). */

.elementor-widget-image.epi-flecha img,
.epi-flecha img {
	width: 44px !important;
	height: 44px !important;
	background-color: #ffffff;
	border-radius: 50% !important;
	padding: 13px;
	box-sizing: border-box;
	transition: background-color .2s ease;
}

.epi-flecha a:hover img {
	background-color: var(--epi-naranja);
}

/* ---------- Utilidad: banner "Developed by" (añadir clase epi-developed a la sección) ---------- */

section.epi-developed,
.epi-developed {
	min-height: 279px !important;
	border-radius: 24px !important;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

section.epi-developed > .elementor-container,
.epi-developed > .elementor-container {
	min-height: 279px !important;
	display: flex;
	align-items: center;
	
	
}

.elementor-column.epi-developed > .elementor-widget-wrap {
	min-height: 279px !important;
	align-items: center;
	align-content: center !important;   /* centrado vertical (flex-wrap) */
	justify-content: center;
}

.epi-developed img {
	width: auto !important;
	height: 61px !important;
	min-height: 0 !important;
	object-fit: contain;
	border-radius: 0 !important;
}

.epi-developed .elementor-heading-title,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .epi-developed .elementor-heading-title,
:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .epi-developed :is(h1, h2, h3, h4, h5, h6) {
	color: #ffffff !important;
	font-size: 24px !important;      /* Figma: Riforma Medium 24 */
	font-weight: 500 !important;
	text-align: center;
	letter-spacing: 0%;
}

/* ---------- Carrusel del blog [epi_blog] ---------- */

.epi-blog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.epi-blog__titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(28px, 3vw, 40px) !important;
	font-weight: 400 !important;
	color: var(--epi-negro) !important;
	letter-spacing: -0.02em;
	margin: 0;
}

.epi-blog__titulo::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--epi-naranja);
	margin-right: 16px;
	vertical-align: middle;
}

.epi-blog__descripcion {
	color: var(--epi-gris-texto);
	margin: 8px 0 0;
}

.epi-blog__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.epi-blog__dots {
	display: flex;
	gap: 8px;
	margin-right: 40px;
}

.epi-blog__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background-color: #E0DED7;
	cursor: pointer;
}

.epi-blog__dot--activo {
	background-color: var(--epi-naranja);
}

.epi-blog__flecha {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: #ffffff url('/wp-content/uploads/2026/07/arrow-right.svg') center / 20px 20px no-repeat;
	transition: background-color .2s ease, opacity .2s ease;
}

.epi-blog__flecha--prev {
	transform: rotate(180deg);
}

.epi-blog__flecha:disabled {
	opacity: .4;
	cursor: default;
}

.epi-blog__flecha:not(:disabled):hover {
	background-color: rgba(240, 239, 236, 1);
}

.epi-blog__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.epi-blog__viewport::-webkit-scrollbar {
	display: none;
}

.epi-blog__track {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.epi-blog__card {
	flex: 0 0 calc(25% - 6px);
	scroll-snap-align: start;
	background-color: #ffffff;
	border-radius: var(--epi-radio-card);
	padding: 32px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.epi-blog__card-titulo,
.epi-blog__card-titulo a {
	font-family: var(--epi-font-2026) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var(--epi-negro) !important;
	text-decoration: none;
	margin: 0 0 12px;
}

.epi-blog__card-fecha {
	font-family: var(--epi-font-2026);
	font-size: 13px;
	color: #7F7D76;
	margin-bottom: 12px;
	order: -1;              /* fecha encima del título, como en el diseño */
}

.epi-blog__card-texto {
	font-family: var(--epi-font-2026);
	font-size: 15px;
	line-height: 1.55;
	color: var(--epi-gris-texto);
	margin: 0 0 20px;
}

.epi-blog__card-enlace {
	font-family: var(--epi-font-2026);
	font-weight: 500;
	color: var(--epi-negro) !important;
	text-decoration: none;
	margin-top: auto;       /* pegado abajo */
}

.epi-blog__card-enlace::after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 10px;
	vertical-align: -2px;
	background: url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / contain no-repeat;
}

/* Tarjeta naranja destacada */
.epi-blog__card--destacada {
	background-color: var(--epi-naranja);
}

.epi-blog__card--destacada .epi-blog__card-titulo {
	font-size: 24px !important;
}

.epi-blog__card--destacada .epi-blog__card-texto {
	color: #33302a;
}

@media (max-width: 1100px) {
	.epi-blog__card { flex-basis: calc(33.333% - 6px); }   /* 3 por vista */
}

@media (max-width: 900px) {
	.epi-blog__card { flex-basis: calc(50% - 4px); }        /* 2 por vista */
	.epi-blog__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
	.epi-blog__card { flex-basis: 90%; }                    /* 1 por vista (con peek del siguiente) */
}

/* ---------- Chips de Listas de correo ----------
   En Elementor: columna con clase  epi-chip  que contenga un heading
   (y opcionalmente un enlace en el propio heading). */

.elementor-column.epi-chip > .elementor-widget-wrap,
.elementor-column.epi-chip > .elementor-element-populated {
	background-color: #ffffff !important;
	border-radius: 999px !important;
	padding: 24px 32px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.elementor-column.epi-chip {
	background-color: transparent !important;
	padding: 4px !important;
}

.elementor-column.epi-chip .elementor-widget-heading {
	margin: 0 !important;
}

.elementor-column.epi-chip > .elementor-widget-wrap::after,
.elementor-column.epi-chip > .elementor-element-populated::after {
	content: '';
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--epi-gris-card) url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / 16px 16px no-repeat;
	margin-left: 16px;
}

/* ---------- Chips [epi_chips] (Listas de correo) ---------- */

.epi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.epi-chips__item {
	flex: 1 1 calc(33.333% - 6px);
	min-width: 260px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	border-radius: 999px;
	padding: 24px 32px;
	box-sizing: border-box;
	text-decoration: none !important;
	transition: background-color .2s ease;
}

.epi-chips__nombre {
	font-family: var(--epi-font-2026);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--epi-negro);
}

.epi-chips__item::after {
	content: '';
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--epi-gris-card) url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / 16px 16px no-repeat;
	margin-left: 16px;
	transition: background-color .2s ease;
}

a.epi-chips__item:hover::after {
	background-color: var(--epi-naranja);
}

@media (max-width: 640px) {
	.epi-chips__item { flex-basis: 100%; min-width: 0; padding: 18px 24px; }
	.epi-chips__item::after { width: 36px; height: 36px; }
}


/* ---------- Contact us: columna naranja (Figma) ---------- */

.epi-contacto .elementor-column:first-child > .elementor-widget-wrap {
	padding: 24px 32px !important;
	row-gap: 40px;              /* gap entre titulo y texto */
	align-content: flex-start;
}

.epi-contacto .elementor-column:first-child .elementor-widget-heading,
.epi-contacto .elementor-column:first-child .elementor-widget-text-editor {
	margin-bottom: 0 !important;
}

.epi-contacto .elementor-column:first-child .elementor-widget-text-editor,
.epi-contacto .elementor-column:first-child .elementor-widget-text-editor p {
	color: rgba(8, 6, 2, 1) !important;
	font-family: var(--epi-font-2026);
	font-size: 16px;
	line-height: 24px !important;
}

/* ---------- Síguenos: tarjetas de redes ----------
   Toda columna del diseño nuevo que contenga un [epi_social] se pinta
   como tarjeta #F0EFEC con padding 24 (pisa el fondo blanco y el padding
   20px guardados en los ajustes de columna del template). */

.elementor-column.epi-card-red > .elementor-widget-wrap,
.elementor-column.epi-card-red > .elementor-element-populated {
	background-color: var(--epi-gris-card) !important;
	padding: 24px !important;
	border-radius: var(--epi-radio-card) !important;
}

/* ---------- Agenda de eventos [epi_agenda] ---------- */

.epi-agenda__head {
	margin-bottom: 24px;
}

.epi-agenda__titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(28px, 3vw, 40px) !important;
	font-weight: 400 !important;
	color: var(--epi-negro) !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
	margin: 0;
}

.epi-agenda__titulo::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--epi-naranja);
	margin-right: 16px;
	vertical-align: middle;
}

.epi-agenda__descripcion {
	color: var(--epi-gris-texto);
	font-family: var(--epi-font-2026);
	font-size: 14px;
	margin: 8px 0 0;
}

.epi-agenda__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	align-items: stretch;
}

.epi-agenda__card {
	background-color: var(--epi-gris-card);
	border-radius: var(--epi-radio-card);
	padding: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.epi-agenda__card--oculta {
	display: none;
}

/* Fecha con icono de calendario (SVG embebido, color naranja) */
.epi-agenda__fecha {
	font-family: var(--epi-font-2026);
	font-size: 14px;
	font-weight: 600;
	color: var(--epi-negro);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.epi-agenda__fecha::before {
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A81C' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.epi-agenda__card-titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(20px, 2vw, 24px) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
	color: var(--epi-gris-texto) !important;
	margin: 0 !important;
}

.epi-agenda__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
}

.epi-agenda__lugar,
.epi-agenda__organizador {
	font-family: var(--epi-font-2026);
	font-size: 14px;
	line-height: 1.5;
	color: var(--epi-negro);
	margin: 0;
}

/* Enlaces adicionales de la ficha (dominios/emails) */
.epi-agenda__extras {
	font-family: var(--epi-font-2026);
	font-size: 13px;
	line-height: 1.6;
	margin: 6px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
}

.epi-agenda__extras a {
	color: var(--epi-gris-texto) !important;
	text-decoration: underline !important;
	word-break: break-all;
}

.epi-agenda__extras a:hover {
	color: var(--epi-naranja-hover) !important;
}

.epi-agenda__enlace {
	font-family: var(--epi-font-2026);
	font-size: 14px;
	font-weight: 500;
	color: var(--epi-negro) !important;
	text-decoration: none !important;
	background-color: #ffffff;
	border-radius: var(--epi-radio-pill);
	padding: 10px 20px;
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	transition: background-color .2s ease;
}

.epi-agenda__enlace::after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-left: 10px;
	background: url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / contain no-repeat;
}

.epi-agenda__enlace:hover,
.epi-agenda__enlace:focus {
	background-color: var(--epi-naranja);
}

/* Sentinel de la carga progresiva (invisible; solo lo observa el JS) */
.epi-agenda__sentinel {
	height: 1px;
}

/* Responsive del grid de la agenda: 3 → 2 → 1 columnas (patrón Figma,
   mismos breakpoints que el listado del blog). */
@media (max-width: 1024px) {
	.epi-agenda__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.epi-agenda__grid {
		grid-template-columns: 1fr;
	}
}

/* Hero naranja de la Agenda: tarjeta redondeada centrada al ancho del
   contenedor (1212px, como la home), no banda a sangre completa. */
section.epi-hero-agenda,
.epi-hero-agenda {
	max-width: 1212px;
	width: calc(100% - 32px);
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 24px;
	overflow: hidden;
}

/* Aviso de la agenda clásica (ver inc/eventos.php) */
.epi-aviso-clasica {
	font-family: var(--epi-font-2026);
	font-size: 15px;
	color: var(--epi-negro);
	background-color: #FDEBC8;
	border: 1px solid #F2D49B;
	border-radius: 12px;
	padding: 12px 16px;
	margin: 0 0 16px;
}

/* ---------- Páginas de Listas de correo (rediseño 2026) ----------
   El hero lleva  epi-2026-start epi-hero-agenda epi-hero-lista ;
   las secciones del cuerpo llevan  epi-lista-body . */

/* Enlaces del cuerpo: negro con subrayado naranja, hover naranja
   (sustituye a los enlaces azules del theme). */
.epi-lista-body .elementor-widget-text-editor a,
.epi-lista-body .elementor-text-editor a {
	color: rgba(246, 171, 22, 1) !important;
	font-weight: 500;
	text-decoration: underline !important;
	text-decoration-color: rgba(246, 171, 22, 1) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color .2s ease;
}

.epi-lista-body .elementor-widget-text-editor a:hover,
.epi-lista-body .elementor-text-editor a:hover {
	color: var(--epi-naranja-hover) !important;
	text-decoration-color: var(--epi-naranja-hover) !important;
}

/* Imágenes del cuerpo (logos RedIRIS, etc.): tarjeta redondeada */
.epi-lista-body .elementor-widget-image img {
	border-radius: var(--epi-radio-card);
	background-color: #ffffff;
}

/* Respiración del cuerpo respecto al hero y al footer */
.epi-lista-body {
	margin-bottom: 24px;
}

/* Fondos grises heredados (botones TheGem con fondo en el contenedor) */
.epi-lista-body .elementor-widget-thegem-styledbutton .elementor-widget-container {
	background-color: transparent !important;
}

/* Colores inline heredados del contenido antiguo (azul marino #000080
   en headings y textos): se fuerzan al color del rediseño. */
.epi-lista-body :is(h1, h2, h3, h4, h5, h6) span[style*="color"] {
	color: inherit !important;
}
.epi-lista-body span[style*="#000080"],
.epi-lista-body span[style*="0, 0, 128"] {
	color: var(--epi-negro) !important;
}

/* Azul legado #3366ff en títulos/textos del contenido antiguo (p. ej. la
   página "Information World en Español"): el rediseño 2026 no usa ese azul,
   así que se fuerza al negro del sistema en cualquier text-editor. :not(a)
   para no pisar enlaces (que tienen su propio tratamiento). */
.elementor-widget-text-editor [style*="#3366ff" i]:not(a),
.elementor-widget-text-editor [style*="51, 102, 255"]:not(a),
.elementor-text-editor [style*="#3366ff" i]:not(a) {
	color: var(--epi-negro) !important;
}

/* Anclas de sección (p. ej. /#listas-correo): dejar aire para el header */
#listas-correo {
	scroll-margin-top: 110px;
}

/* ---------- Páginas ThinkEPI e Infonomy (rediseño 2026) ---------- */
/* El hero de Infonomy (.epi-hero-infonomy) comparte estructura y estilo con
   el de ThinkEPI, así que los selectores del hero aplican a ambas clases. */

/* Recursos y links de interés: rectángulo redondeado 16px en vez de
   píldora (añadir  epi-chips-cuadrado  a la sección del shortcode). */
.epi-chips-cuadrado .epi-chips__item {
	border-radius: 16px;
}

/* Hero: imagen de la derecha con esquinas redondeadas 16px; en escritorio
   imagen y caja naranja igualadas a 560px de alto. */
.epi-hero-thinkepi .elementor-widget-image img,
.epi-hero-infonomy .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 560px;
	object-fit: cover;
	border-radius: 16px;
}

/* La caja naranja iguala la altura de la imagen y el botón queda pegado
   al final de la caja. */
.epi-hero-thinkepi .elementor-column:first-child > .elementor-widget-wrap,
.epi-hero-infonomy .elementor-column:first-child > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	min-height: 560px;
}

.epi-hero-thinkepi .elementor-column:first-child .elementor-widget-button,
.epi-hero-infonomy .elementor-column:first-child .elementor-widget-button {
	margin-top: auto;
}

/* La columna de la imagen pierde TODO el padding: en vertical para igualar
   la altura (560px) con la caja naranja, y en horizontal (los ~21px del gap
   de columna del theme) para que la imagen quede a ras del borde de la columna
   y la separación visible con la caja naranja sea solo el gap de 8px. */
.epi-hero-thinkepi .elementor-column:last-child > .elementor-widget-wrap,
.epi-hero-infonomy .elementor-column:last-child > .elementor-widget-wrap {
	padding: 0;
}

/* Hero responsive: cuando el ancho no da, las columnas dejan de convivir
   y la caja naranja (y la imagen) pasan a ocupar el 100 %. */
@media (max-width: 1024px) {
	.epi-hero-thinkepi > .elementor-container,
	.epi-hero-thinkepi .elementor-row,
	.epi-hero-infonomy > .elementor-container,
	.epi-hero-infonomy .elementor-row {
		flex-wrap: wrap;
	}
	.epi-hero-thinkepi .elementor-column,
	.epi-hero-infonomy .elementor-column {
		width: 100% !important;
	}
	/* Acotar la imagen al apilarse (evita que crezca a todo el ancho). */
	.epi-hero-thinkepi .elementor-widget-image img,
	.epi-hero-infonomy .elementor-widget-image img {
		height: 560px;
	}
	/* 8px entre la caja naranja y la imagen apiladas. */
	.epi-hero-thinkepi .elementor-column:last-child,
	.epi-hero-infonomy .elementor-column:last-child {
		margin-top: 8px;
	}
	.epi-hero-thinkepi .elementor-column:first-child > .elementor-widget-wrap,
	.epi-hero-infonomy .elementor-column:first-child > .elementor-widget-wrap {
		min-height: 0;
	}
}

/* En móvil, la imagen del hero de ThinkEPI/Infonomy también se acota (≈327px). */
@media (max-width: 767px) {
	.epi-hero-thinkepi .elementor-widget-image img,
	.epi-hero-infonomy .elementor-widget-image img {
		height: 327px;
	}
}

/* ---------- Respiración lateral del cuerpo (rediseño 2026) ----------
   Cuando el viewport se acerca al ancho de la caja (1212px), el contenido
   quedaba pegado a los bordes. 20px de aire a cada lado en todas las
   secciones del rediseño (home, listas, agenda...). El hero no lo necesita:
   ya se estrecha solo (calc(100% - 32px)). */
@media (max-width: 1260px) {
	:is(.epi-2026, .epi-2026-start, #epi-2026-start, .epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element):not(.epi-hero-agenda) > .elementor-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ---------- Página de búsqueda (search.php del child theme) ----------
   La lupa del header enlaza a /?s= (ver epi-2026.js). Hero naranja como
   la agenda, resultados en tarjetas grises. */

/* Los huecos entre header, #main y footer dejaban ver el blanco de #page
   (franjas blancas). El fondo del rediseño es global (#main ya es gris en
   todo el sitio via child style.css), así que se aplica a #page entero. */
#page.layout-fullwidth {
	background-color: var(--epi-fondo);
}

.epi-search {
	max-width: 1212px;
	width: calc(100% - 32px);
	margin: 0 auto;
	font-family: var(--epi-font-2026);
}

.epi-search__hero {
	background-color: var(--epi-naranja);
	border-radius: 24px;
	padding: 48px;
	margin: 24px 0 40px;
}

.epi-search__titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(36px, 5vw, 56px) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	color: var(--epi-negro) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.epi-search__descripcion {
	font-size: 15px;
	line-height: 1.5;
	color: var(--epi-negro);
	margin: 12px 0 0;
}

.epi-search__form {
	margin-top: 32px;
	display: flex;
	gap: 8px;
	max-width: 640px;
}

/* Pill blanco con la lupa gris dentro, sin botón (se envía con Enter) */
.epi-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 56px;
	border: none !important;
	border-radius: var(--epi-radio-pill, 28px);
	background: #ffffff url('/wp-content/uploads/2026/07/search-gray.svg') right 20px center / 20px 20px no-repeat;
	padding: 0 52px 0 20px;
	font-family: var(--epi-font-2026);
	font-size: 15px;
	color: var(--epi-negro);
	outline: none !important;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.epi-search__input::placeholder {
	color: rgba(127, 125, 118, 1);
	opacity: 1;
}

.epi-search__input:focus {
	box-shadow: 0 0 0 1px rgb(255 255 255);
	border: none !important;
	outline: none !important;
}

/* Cuadro donde viven los resultados: blanco solo si hay resultados */
.epi-search__body {
	border-radius: 16px;
	min-height: 320px;
	padding: 32px;
	margin: 0 0 48px;
}

.epi-search__body--con-resultados {
	background-color: #ffffff;
}

.epi-search__contador {
	font-size: 14px;
	color: var(--epi-gris-texto);
	margin: 0 0 16px;
}

.epi-search__aviso {
	font-size: 24px;
	color: var(--epi-gris-texto);
	margin: 0;
}

.epi-search__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	align-items: stretch;
}

.epi-search__card {
	background-color: var(--epi-gris-card);
	border-radius: var(--epi-radio-card);
	padding: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;                  /* permite encoger dentro del track del grid */
	overflow-wrap: anywhere;       /* URLs largas del extracto se parten y no desbordan */
	word-break: break-word;
}

.epi-search__tipo {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--epi-naranja-hover);
	margin: 0;
}

.epi-search__card-titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(20px, 2vw, 24px) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.epi-search__card-titulo a {
	color: var(--epi-negro) !important;
	text-decoration: none !important;
}

.epi-search__card-titulo a:hover {
	color: var(--epi-naranja-hover) !important;
}

.epi-search__fecha {
	font-size: 13px;
	color: var(--epi-gris-texto);
	margin: 0;
}

.epi-search__extracto {
	font-size: 14px;
	line-height: 1.5;
	color: var(--epi-negro);
	margin: 0;
}

.epi-search__enlace {
	font-family: var(--epi-font-2026);
	font-size: 14px;
	font-weight: 500;
	color: var(--epi-negro) !important;
	text-decoration: none !important;
	background-color: #ffffff;
	border-radius: var(--epi-radio-pill);
	padding: 10px 20px;
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	transition: background-color .2s ease;
}

.epi-search__enlace::after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-left: 10px;
	background: url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / contain no-repeat;
}

.epi-search__enlace:hover,
.epi-search__enlace:focus {
	background-color: var(--epi-naranja);
}

/* ---------- Paginación (buscador, blog y donde haga falta) ----------
   Cubre la paginación nativa de WP (.navigation.pagination) y la del
   theme (.gem-pagination, usada en el blog). Números sin fondo, solo la
   página actual en círculo naranja; hover en naranja suave; cursores
   prev/next solo con la flecha SVG. */

.navigation.pagination,
.gem-pagination {
	margin: 32px 0 0;
}

.navigation.pagination .nav-links,
.gem-pagination .gem-pagination-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

:is(.navigation.pagination, .gem-pagination) .page-numbers {
	font-family: var(--epi-font-2026) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--epi-negro) !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 50% !important;
	width: 40px !important;
	height: 40px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color .2s ease;
}

/* Solo el número seleccionado lleva el círculo naranja pleno */
:is(.navigation.pagination, .gem-pagination) .page-numbers.current {
	background-color: var(--epi-naranja) !important;
}

/* Hover (números y cursores) en naranja suave */
:is(.navigation.pagination, .gem-pagination) .page-numbers:not(.current):not(.dots):hover {
	background-color: rgba(246, 171, 22, 0.4) !important;
}

/* Cursores prev/next: solo la flecha SVG, sin fondo
   (se oculta el texto y los iconos del theme) */
:is(.navigation.pagination, .gem-pagination) .page-numbers.prev,
:is(.navigation.pagination, .gem-pagination) .page-numbers.next {
	font-size: 0 !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

:is(.navigation.pagination, .gem-pagination) .page-numbers.prev::before,
:is(.navigation.pagination, .gem-pagination) .page-numbers.prev::after,
:is(.navigation.pagination, .gem-pagination) .page-numbers.next::before,
:is(.navigation.pagination, .gem-pagination) .page-numbers.next::after {
	content: none !important;
}

:is(.navigation.pagination, .gem-pagination) .page-numbers.prev {
	background-image: url('/wp-content/uploads/2026/07/arrow-left.svg');
}

:is(.navigation.pagination, .gem-pagination) .page-numbers.next {
	background-image: url('/wp-content/uploads/2026/07/arrow-right.svg');
}

@media (max-width: 1023px) {
	.epi-search__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.epi-search__hero {
		padding: 32px 24px;
	}
	.epi-search__form {
		flex-direction: column;
	}
	.epi-search__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Páginas antiguas adaptadas (page-fullwidth.php del child) ----------
   Páginas sin el marcador epi-2026-start: hero naranja con el título
   (sustituye a la banda roja del theme) y contenido en cuadro blanco. */

.epi-page {
	max-width: 1212px;
	width: calc(100% - 32px);
	margin: 0 auto;
	font-family: var(--epi-font-2026);
}

.epi-page__hero {
	background-color: var(--epi-naranja);
	border-radius: 24px;
	padding: 48px;
	margin: 24px 0 40px;
}

/* Buscador dentro del hero de una .epi-page (p. ej. IWE) — separación
   respecto del h1 y ancho máximo confortable */
.epi-page__hero .epi-page__buscador {
	margin: 24px 0 0;
	max-width: 520px;
}

.epi-page__titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(32px, 4.5vw, 48px) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	color: var(--epi-negro) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.epi-page__body {
	background-color: #ffffff;
	border-radius: 16px;
	min-height: 200px;
	padding: 32px;
	margin: 0 0 48px;
}

/* El contenido antiguo (Elementor o clásico) no debe desbordar el cuadro */
.epi-page__body img {
	max-width: 100%;
	height: auto;
}

/* Texto del cuerpo en negro del rediseño (el theme lo pintaba gris
   azulado #5f727f) y enlaces en naranja, para unificar */
.epi-page__body,
.epi-page__body p,
.epi-page__body li,
.epi-page__body td,
.epi-page__body .entry-content,
.epi-page__body .post-content,
.epi-page__body .elementor-widget-text-editor,
.epi-page__body .elementor-text-editor {
	color: rgba(8, 6, 2, 1) !important;
}

.epi-page__body a {
	color: rgba(246, 171, 22, 1) !important;
}

.epi-page__body a:hover,
.epi-page__body a:focus {
	color: var(--epi-naranja-hover) !important;
}

@media (max-width: 767px) {
	.epi-page__hero {
		padding: 32px 24px;
	}
	.epi-page__body {
		padding: 24px 16px;
	}
}

/* ---------- Cuerpo de las páginas de listas en cuadro blanco ---------- */
.epi-lista-body > .elementor-container {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 32px !important;
}
/* ---------- Botón de envío de WPForms (diseño 2026) ----------
   Pill naranja con texto negro, como los botones del rediseño. */
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-submit,
div.wpforms-container-full .wpforms-form input[type=submit] {
	background-color: rgba(246, 171, 22, 1) !important;
	color: rgba(8, 6, 2, 1) !important;
	border: none !important;
	border-radius: var(--epi-radio-pill, 28px) !important;
	font-family: var(--epi-font-2026) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	padding: 12px 28px !important;
	height: auto !important;
	box-shadow: none !important;
	transition: background-color .2s ease;
}

div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:focus,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover,
div.wpforms-container-full .wpforms-form input[type=submit]:hover {
	background-color: var(--epi-naranja-hover) !important;
	color: rgba(8, 6, 2, 1) !important;
}

/* ---------- Página /blog/ (rediseño 2026) ----------
   Hero centrado (epi-hero-blog) + listado [epi_blog_listado] con chips de
   categoría, buscador y paginación (la paginación reutiliza las reglas de
   .navigation.pagination de más arriba). */

/* Hero: subtítulo estrecho y centrado; buscador píldora centrado */
.epi-hero-blog .elementor-widget-text-editor {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.epi-bloglist__buscador {
	position: relative;
	flex: 0 0 260px;
}

.epi-bloglist__buscador--hero {
	max-width: 480px;
	margin: 24px auto 0;
}

.epi-bloglist__buscador-input {
	width: 100%;
	height: 48px;
	border: 1px solid var(--epi-borde-suave) !important;
	border-radius: var(--epi-radio-pill, 28px);
	background-color: #ffffff;
	padding: 0 52px 0 20px;
	font-family: var(--epi-font-2026);
	font-size: 15px;
	color: var(--epi-negro);
	outline: none !important;
	box-shadow: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.epi-bloglist__buscador-input::placeholder {
	color: rgba(127, 125, 118, 1);
	opacity: 1;
}

.epi-bloglist__buscador-boton {
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: transparent url('/wp-content/uploads/2026/07/search-gray.svg') center / 18px 18px no-repeat;
	transition: background-color .2s ease;
}

.epi-bloglist__buscador-boton:hover {
	background-color: var(--epi-gris-card);
}

/* Búsqueda activa: aparece la ✕ (enlace a la URL sin ?buscar=, conserva el
   filtro de categoría) junto a la lupa; el input deja sitio para ambas. */
.epi-bloglist__buscador--activo .epi-bloglist__buscador-input {
	/*padding-right: 88px;*/
}

.epi-bloglist__buscador-borrar {
	position: absolute;
	top: 50%;
	margin-top: 1px;
	right: 36px;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--epi-font-2026);
	font-size: 14px;
	line-height: 1;
	color: var(--epi-negro) !important;
	text-decoration: none !important;
	transition: background-color .2s ease;
}

.epi-bloglist__buscador-borrar::before {
	content: '✕';
}

.epi-bloglist__buscador-borrar:hover {
	background-color: var(--epi-naranja);
}

/* Se oculta la ✕ nativa de WebKit para no duplicarla */
.epi-bloglist__buscador-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Fila de filtros: chips a la izquierda, buscador a la derecha */
.epi-bloglist__filtros {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.epi-bloglist__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.epi-bloglist__chip {
	font-family: var(--epi-font-2026);
	font-size: 14px;
	color: var(--epi-negro) !important;
	text-decoration: none !important;
	background-color: #ffffff;
	border: 1px solid var(--epi-borde-suave);
	border-radius: var(--epi-radio-pill, 28px);
	padding: 10px 18px;
	transition: background-color .2s ease;
}

.epi-bloglist__chip:hover {
	background-color: var(--epi-gris-card);
}

.epi-bloglist__chip--activa {
	background-color: var(--epi-naranja) !important;
	border-color: var(--epi-naranja);
}

/* La chip activa lleva ✕ (el enlace quita el filtro) */
.epi-bloglist__chip--activa::after {
	content: '✕';
	margin-left: 10px;
	font-size: 12px;
}

/* Grid de tarjetas: sin caja, imagen redondeada + textos sobre el fondo */
.epi-bloglist__grid {
	display: grid;
	/* minmax(0,1fr): sin esto, contenido sin puntos de ruptura (URLs largas
	   en extractos) ensancha su columna y descuadra el grid */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 24px;
	align-items: stretch;
}

.epi-bloglist__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.epi-bloglist__imagen {
	position: relative;
	display: block;
	border-radius: var(--epi-radio-card);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background-color: var(--epi-gris-card);
}

/* Blindado contra las reglas de TheGem sobre .wp-post-image (width/height
   propios): la imagen se posiciona absoluta dentro de la caja 3:2. */
.epi-bloglist .epi-bloglist__imagen img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: var(--epi-radio-card);
}

/* Etiqueta de categoría sobre la imagen */
.epi-bloglist__cat {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--epi-font-2026);
	font-size: 12px;
	color: #ffffff;
	background-color: var(--epi-negro);
	border-radius: var(--epi-radio-pill, 28px);
	padding: 5px 14px;
}

.epi-bloglist__fecha {
	font-family: var(--epi-font-2026);
	font-size: 13px;
	color: #7F7D76;
	margin: 16px 0 8px;
}

.epi-bloglist__titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(20px, 2vw, 24px) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

.epi-bloglist__titulo a {
	color: var(--epi-negro) !important;
	text-decoration: none !important;
}

.epi-bloglist__titulo a:hover {
	color: var(--epi-naranja-hover) !important;
}

.epi-bloglist__texto {
	font-family: var(--epi-font-2026);
	font-size: 15px;
	line-height: 1.55;
	color: var(--epi-gris-texto);
	margin: 0 0 16px;
}

.epi-bloglist__enlace {
	font-family: var(--epi-font-2026);
	font-size: 15px;
	font-weight: 500;
	color: var(--epi-negro) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	margin-top: auto;
	align-self: flex-start;
}

.epi-bloglist__enlace::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	vertical-align: -2px;
	background: url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / contain no-repeat;
}

.epi-bloglist__enlace:hover {
	color: var(--epi-naranja-hover) !important;
}

.epi-bloglist__vacio {
	font-family: var(--epi-font-2026);
	font-size: 15px;
	color: var(--epi-gris-texto);
	background-color: #ffffff;
	border-radius: var(--epi-radio-card);
	padding: 32px;
}

.epi-bloglist__vacio a {
	color: var(--epi-negro) !important;
	font-weight: 500;
	text-decoration: underline !important;
	text-decoration-color: var(--epi-naranja) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (max-width: 1024px) {
	.epi-bloglist__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.epi-bloglist__filtros {
		flex-direction: column;
	}
	.epi-bloglist__buscador {
		flex-basis: auto;
		width: 100%;
		max-width: 360px;
	}
}

@media (max-width: 640px) {
	.epi-bloglist__grid {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   Página de ENTRADA de blog (single post) — rediseño 2026
   Plantilla: child/content-single-epi.php (cargada por child/single.php).
   Sustituye la cabecera roja por un hero-tarjeta + cuerpo en tarjeta +
   caja de autor + "Comparte" + banner Developed by.
   ===================================================================== */

.epi-single {
	font-family: var(--epi-font-2026);
}

.epi-single .epi-single__wrap {
	max-width: 1252px;         /* 1212 de caja + 20px de aire a cada lado */
	margin: 0 auto;
	padding: 32px 20px 72px;
	box-sizing: border-box;
}

/* ---------- Breadcrumb ---------- */
.epi-single__crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: #7F7D76;
	margin: 0 0 20px;
}
.epi-single__crumbs a.epi-single__crumbs-back {
	color: #7F7D76 !important;
	text-decoration: none;
}
.epi-single__crumbs a.epi-single__crumbs-back:hover {
	color: var(--epi-naranja-hover) !important;
}
.epi-single__crumbs-sep {
	color: #C9C7C0;
}
.epi-single__crumbs-current {
	color: var(--epi-negro);
	max-width: 60ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Hero-tarjeta ---------- */
.epi-single__hero {
	display: grid;
	grid-template-columns: minmax(0, 38%) 1fr;
	gap: 8px;
	align-items: stretch;   /* imagen y texto igual de altos en escritorio */
}
.epi-single__hero-media {
	position: relative;
	min-height: 280px;
	border-radius: var(--epi-radio-card);
	overflow: hidden;
}
.epi-single__hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.epi-single__tags {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	z-index: 2;
}
.epi-single__tag {
	display: inline-block;
	font-family: var(--epi-font-2026);
	font-size: 13px;
	line-height: 1;
	color: var(--epi-negro) !important;
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: var(--epi-radio-pill);
	padding: 8px 16px;
	text-decoration: none;
	backdrop-filter: blur(2px);
	transition: background-color .15s ease;
}
.epi-single__tag:hover {
	background-color: #ffffff !important;
	color: var(--epi-negro) !important;
}
.epi-single__hero-body {
	background-color: #ffffff;
	border-radius: var(--epi-radio-card);
	padding: clamp(24px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.epi-single__title {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(26px, 2.6vw, 36px) !important;
	font-weight: 400 !important;
	line-height: 1.18 !important;
	letter-spacing: -0.02em !important;
	color: var(--epi-negro) !important;
	text-transform: none !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}
.epi-single__date {
	font-size: 14px;
	color: #7F7D76;
	margin: 0 0 20px;
}
.epi-single__excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: var(--epi-gris-texto);
	margin: 0 0 28px;
}

/* ---------- Comparte (hero y pie del artículo) ---------- */
.epi-share {
	margin: 0;
}
.epi-share__label {
	display: block;
	font-family: var(--epi-font-2026);
	font-size: 15px;
	font-weight: 600;
	color: var(--epi-negro);
	margin: 0 0 12px;
}
.epi-share__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.epi-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--epi-gris-card);
	color: var(--epi-negro);
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.epi-share__link svg {
	width: 18px;
	height: 18px;
	display: block;
}
.epi-share__link:hover,
.epi-share__link:focus-visible {
	background-color: var(--epi-naranja);
	color: var(--epi-negro);
	outline: none;
}
.epi-share__copy.is-copied {
	background-color: var(--epi-naranja);
}

/* ---------- Cuerpo del artículo (tarjeta) ---------- */
.epi-single__article {
	background-color: #ffffff;
	border-radius: var(--epi-radio-card);
	padding: clamp(24px, 4vw, 64px);
	margin-top: 24px;
}
.epi-single__content {
	max-width: 820px;
}

/* Tipografía del contenido (blindada frente a TheGem) */
.epi-single__content > *:first-child { margin-top: 0 !important; }

.epi-single__content h2,
.epi-single__content h3,
.epi-single__content h4,
.epi-single__content h5,
.epi-single__content h6 {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
}
.epi-single__content h2 {
	font-size: clamp(24px, 2.4vw, 30px) !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	margin: 1.8em 0 0.6em !important;
}
.epi-single__content h3 {
	font-size: clamp(20px, 2vw, 23px) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	margin: 1.6em 0 0.5em !important;
}
.epi-single__content h4 {
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin: 1.4em 0 0.5em !important;
}
.epi-single__content p,
.epi-single__content li {
	font-family: var(--epi-font-2026);
	font-size: 16px;
	line-height: 1.7;
	color: #2B2A26;
}
.epi-single__content p {
	margin: 0 0 1.35em;
}
.epi-single__content a {
	color: var(--epi-naranja-hover) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.epi-single__content a:hover {
	color: var(--epi-negro) !important;
}
.epi-single__content ul,
.epi-single__content ol {
	margin: 0 0 1.35em;
	padding-left: 1.4em;
}
.epi-single__content li {
	margin: 0 0 0.5em;
}
.epi-single__content ul li { list-style: disc; }
.epi-single__content ol li { list-style: decimal; }

.epi-single__content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}
.epi-single__content figure {
	margin: 1.8em 0;
}
.epi-single__content figcaption,
.epi-single__content .wp-caption-text {
	font-size: 13px;
	color: #7F7D76;
	margin-top: 10px;
	text-align: left;
}
.epi-single__content .wp-caption {
	max-width: 100%;
	height: auto;
}

.epi-single__content blockquote {
	border: 0 !important;
	border-left: 3px solid var(--epi-naranja) !important;
	border-radius: 0 !important;
	margin: 1.8em 0;
	padding: 4px 0 4px 28px;
	box-shadow: none !important;
	font-family: var(--epi-font-2026);
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.45;
	font-style: normal;
	color: var(--epi-negro);
	background: none;
}
.epi-single__content blockquote p { font-size: inherit; color: inherit; margin: 0; }
.epi-single__content blockquote cite,
.epi-single__content blockquote footer {
	display: block;
	margin-top: 14px;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	color: #7F7D76;
}

/* ---------- Caja de autor ---------- */
.epi-single__author {
	background-color: #F5F4F1;
	border-radius: var(--epi-radio-card);
	padding: 26px 30px;
	margin: 40px 0 0;
	max-width: 820px;
}
.epi-single__author-name {
	font-family: var(--epi-font-2026);
	font-size: 19px;
	font-weight: 600;
	color: var(--epi-negro);
}
.epi-single__author-role {
	font-size: 15px;
	color: var(--epi-gris-texto);
	margin-top: 4px;
}
.epi-single__author-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 12px;
}
.epi-single__author-links a {
	color: var(--epi-naranja-hover) !important;
	text-decoration: none;
	font-size: 15px;
	width: fit-content;
}
.epi-single__author-links a:hover {
	text-decoration: underline;
}

/* Comparte al pie del artículo */
.epi-single__article .epi-share {
	margin-top: 36px;
}

/* ---------- Banner "Developed by" ---------- */
.epi-single__developed {
	margin-top: 40px;
	border-radius: 24px;
	min-height: 220px;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 32px 20px;
}
.epi-single__developed-text {
	color: #ffffff;
	font-family: var(--epi-font-2026);
	font-size: 24px;
	font-weight: 500;
}
.epi-single__developed-logo {
	height: 52px;
	width: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.epi-single__hero {
		grid-template-columns: 1fr;
	}
	.epi-single__hero-media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}
@media (max-width: 600px) {
	.epi-single .epi-single__wrap {
		padding: 20px 16px 56px;
	}
	.epi-single__developed-text { font-size: 20px; }
	.epi-single__developed-logo { height: 40px; }
}

/* =====================================================================
   Footer 2026 (.custom-footer) — responsive en una sola columna
   Por defecto son 5 columnas al 20% (logo + Publicaciones + Eventos +
   Comunidad + Acerca). Por debajo de 1024px TheGem las envuelve en 4+1
   (feo). Forzamos apilado vertical en UNA columna, en orden: logo,
   Publicaciones, Eventos, Comunidad, Acerca.
   ===================================================================== */
@media (max-width: 1024px) {
	footer.custom-footer .elementor-row {
		flex-wrap: wrap !important;
	}
	footer.custom-footer .elementor-column.elementor-top-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		min-width: 0 !important;
	}
	/* Aire entre bloques apilados */
	footer.custom-footer .elementor-column.elementor-top-column:not(:last-child) {
		margin-bottom: 28px;
	}
	/* Todo alineado a la izquierda en el apilado vertical:
	   logo, redes y avisos (© / cookies / legal). */
	footer.custom-footer .elementor-widget-image,
	footer.custom-footer .elementor-widget-image .elementor-widget-container,
	footer.custom-footer .elementor-widget-heading,
	footer.custom-footer .elementor-widget-heading .elementor-widget-container,
	footer.custom-footer .elementor-widget-text-editor,
	footer.custom-footer .elementor-widget-text-editor .elementor-widget-container,
	footer.custom-footer .elementor-widget-text-editor .elementor-text-editor,
	footer.custom-footer .elementor-widget-text-editor p,
	footer.custom-footer .elementor-widget-text-editor div {
		text-align: left !important;
	}
	footer.custom-footer .elementor-widget-image .elementor-image,
	footer.custom-footer .elementor-widget-image img {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
	/* Redes (epi_social) a la izquierda pese a align="right" */
	footer.custom-footer .epi-social {
		justify-content: flex-start !important;
		text-align: left !important;
	}
}

/* =====================================================================
   Página "Libros e Informes" (archivo de productos) — rediseño 2026
   Plantilla: child/archive-libros-epi-2026.php (enrutada por
   epi2026_libros_template). El grid lo pinta el shortcode
   [epi_libros_listado] (scimagoepi-core/inc/libros-listado.php).
   Escaparate: portada + colección + título + descripción (si existe) +
   flecha. Paginación con las clases nativas (.navigation.pagination) para
   reutilizar el CSS de más arriba.
   ===================================================================== */

/* Fondo crema tras el header (TheGem pinta #page en blanco). */
body:has(.epi-libros-page) #page {
	background-color: var(--epi-fondo) !important;
}

/* Caja centrada (misma anchura que el resto del rediseño). */
.epi-libros-page__inner {
	max-width: 1212px;
	margin: 0 auto;
	padding: 48px 20px 72px;
	box-sizing: border-box;
}

/* ---------- Hero (título centrado) ---------- */
.epi-libros-hero {
	text-align: center;
	margin-bottom: 48px;
}

.epi-libros-hero__titulo {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	font-size: clamp(34px, 4.5vw, 52px) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Grid de tarjetas ---------- */
.epi-libros__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
	align-items: stretch;
}

.epi-libros__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Portada: marco oscuro redondeado; la cubierta (portrait) se centra
   sin recortarse (contain) con un margen oscuro alrededor. */
.epi-libros__cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	border-radius: var(--epi-radio-card);
	overflow: hidden;
	background-color: #262626;
	padding: 22px;
	box-sizing: border-box;
}

/* Blindado contra las reglas de TheGem sobre .wp-post-image (fija
   width/height y position propios en el grid portfolio). */
.epi-libros .epi-libros__cover img {
	position: static !important;
	width: auto !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.epi-libros__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 18px;
}

/* Colección (categoría de producto) */
.epi-libros__cat {
	font-family: var(--epi-font-2026);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7F7D76;
	margin-bottom: 8px;
}

.epi-libros__titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(18px, 1.6vw, 21px) !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
}

.epi-libros__titulo a {
	color: var(--epi-negro) !important;
	text-decoration: none !important;
}

.epi-libros__titulo a:hover {
	color: var(--epi-naranja-hover) !important;
}

.epi-libros__texto {
	font-family: var(--epi-font-2026);
	font-size: 15px;
	line-height: 1.55;
	color: var(--epi-gris-texto);
	margin: 0 0 16px;
}

/* Flecha ↗ en caja redondeada, al pie de la tarjeta */
.epi-libros__enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: auto;
	border: none;
	border-radius: 50%;
	background-color: #ffffff;
	transition: background-color .2s ease;
}

.epi-libros__enlace-icono {
	width: 20px;
	height: 20px;
	background: url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / contain no-repeat;
}

.epi-libros__enlace:hover {
	background-color: var(--epi-naranja);
	border-color: var(--epi-naranja);
}

.epi-libros__vacio {
	font-family: var(--epi-font-2026);
	font-size: 16px;
	color: var(--epi-gris-texto);
	background-color: #ffffff;
	border-radius: var(--epi-radio-card);
	padding: 40px;
	text-align: center;
}

/* Paginación: separación superior (reutiliza .navigation.pagination) */
.epi-libros__paginacion {
	margin-top: 56px;
}

@media (max-width: 1024px) {
	.epi-libros__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}
}

@media (max-width: 640px) {
	.epi-libros__grid {
		grid-template-columns: 1fr;
	}
	.epi-libros-page__inner {
		padding: 32px 16px 56px;
	}
}

/* ---------- Contact us (2 columnas: naranja + formulario) ---------- */
.epi-libros-contacto {
	display: flex;
	gap: 8px;
	margin-top: 72px;
	align-items: stretch;
}

.epi-libros-contacto__intro {
	flex: 1 1 0;
	background-color: var(--epi-naranja);
	border-radius: var(--epi-radio-card);
	padding: 44px;
	box-sizing: border-box;
}

.epi-libros-contacto__titulo {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	font-size: clamp(28px, 2.6vw, 36px) !important;
	font-weight: 400 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}

.epi-libros-contacto__texto {
	font-family: var(--epi-font-2026);
	font-size: 16px;
	line-height: 1.6;
	color: var(--epi-negro);
	margin: 0;
	max-width: 42ch;
}

.epi-libros-contacto__form {
	flex: 1 1 0;
	background-color: #ffffff;
	border-radius: var(--epi-radio-card);
	padding: 36px;
	box-sizing: border-box;
}

/* Los campos del formulario (CF7) NO se estilizan aquí: la sección lleva
   también la clase "epi-contacto", de modo que hereda EXACTAMENTE los mismos
   estilos que el formulario del blog (epi-forms.css: campos píldora 999px,
   botón "Enviar" naranja de ancho automático, etc.). Así se ven idénticos. */

/* ---------- Developed by: separación respecto al formulario de contacto
   (como en blog/home) ---------- */
.epi-libros-developed {
	margin-top: 80px;
}

@media (max-width: 786px) {
	.epi-libros-contacto {
		flex-direction: column;
	}
	.epi-libros-contacto__intro,
	.epi-libros-contacto__form {
		flex: 1 1 100%;
	}
}

/* =====================================================================
   Ficha de producto (single Libro/Informe) — base body.single-product
   La ficha usa ahora una PLANTILLA PROPIA 2026 (child/single-producto-epi-2026
   → content-single-producto.php, bloque ".epi-producto" más abajo). Estas
   reglas body.single-product son la base común (fondo crema + quitar la sombra
   del menú) y quedan además como RESPALDO por si alguna ficha cayera en la
   plantilla estándar de WooCommerce/TheGem (skin de título, enlaces, pestañas…).
   Todo scopeado a body.single-product para no tocar el carrito.
   ===================================================================== */

/* Fondo crema tras el header (TheGem pinta #page en blanco). */
body.single-product #page {
	background-color: var(--epi-fondo) !important;
}

/* La "sombra bajo el menú" (inset del .page__top-shadow) sobra en el rediseño. */
body.single-product .page__top-shadow::before {
	box-shadow: none !important;
}

/* Migas de pan */
body.single-product .page-breadcrumbs {
	font-family: var(--epi-font-2026);
	font-size: 13px;
}
body.single-product .page-breadcrumbs a {
	color: var(--epi-gris-texto) !important;
	text-decoration: none !important;
}
body.single-product .page-breadcrumbs a:hover {
	color: var(--epi-naranja-hover) !important;
}

/* Título del producto: sin mayúsculas grises, tipografía 2026 */
body.single-product .product_title,
body.single-product .product-page__wrapper .product_title {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	font-size: clamp(28px, 3vw, 42px) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
}

/* Categorías / colección */
body.single-product .product_meta .posted_in {
	font-family: var(--epi-font-2026);
	font-size: 15px;
}
body.single-product .product_meta .posted_in a {
	color: var(--epi-negro) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--epi-naranja) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
body.single-product .product_meta .posted_in a:hover {
	color: var(--epi-naranja-hover) !important;
}

/* Enlaces del cuerpo (descripción / pestañas): azul → negro con subrayado
   naranja. Se excluyen iconos de compartir, navegación y botones. */
body.single-product .thegem-tabs a:not(.button):not(.gem-button),
body.single-product .thegem-accordion__item-content a:not(.button):not(.gem-button),
body.single-product .woocommerce-Tabs-panel a:not(.button):not(.gem-button),
body.single-product .woocommerce-tabs a:not(.button):not(.gem-button) {
	color: var(--epi-negro) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--epi-naranja) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	word-break: break-word;
	overflow-wrap: anywhere;
}
body.single-product .thegem-tabs a:not(.button):hover,
body.single-product .thegem-accordion__item-content a:not(.button):hover,
body.single-product .woocommerce-Tabs-panel a:not(.button):hover,
body.single-product .woocommerce-tabs a:not(.button):hover {
	color: var(--epi-naranja-hover) !important;
}

/* Tipografía 2026 en los títulos del cuerpo de la descripción (incluye los
   rótulos de sección PRÓLOGO/COMUNICACIONES… que van en h5/h6). */
body.single-product .thegem-tabs :is(h1, h2, h3, h4, h5, h6),
body.single-product .woocommerce-Tabs-panel :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
	font-weight: 400 !important;
}

/* Neutraliza los colores azules inline (#0000ff / #000080) del contenido
   heredado, salvo en enlaces (que ya llevan su propio color 2026). El flag i
   cubre mayúsculas/minúsculas del hex. */
body.single-product .thegem-tabs :is(h1, h2, h3, h4, h5, h6) span:not(a),
body.single-product .woocommerce-Tabs-panel :is(h1, h2, h3, h4, h5, h6) span:not(a),
body.single-product .thegem-tabs span[style*="#0000ff" i]:not(a),
body.single-product .woocommerce-Tabs-panel span[style*="#0000ff" i]:not(a),
body.single-product .thegem-tabs span[style*="#000080" i]:not(a),
body.single-product .woocommerce-Tabs-panel span[style*="#000080" i]:not(a) {
	color: var(--epi-negro) !important;
}

/* Pestañas (Descripción / Additional info / Reviews) */
body.single-product .thegem-tabs__nav-item {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-gris-texto) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
body.single-product .thegem-tabs__nav-item--active {
	color: var(--epi-negro) !important;
	border-bottom-color: var(--epi-naranja) !important;
}
body.single-product .thegem-tabs__nav-item::after,
body.single-product .thegem-tabs__nav-item--active::after {
	background-color: var(--epi-naranja) !important;
}

/* Portada del producto: esquinas redondeadas 2026 */
body.single-product .fancy-product-gallery .image-inner,
body.single-product .fancy-product-gallery img,
body.single-product .product-images img {
	border-radius: var(--epi-radio-card);
}

/* "Related Products" */
body.single-product .related-products .product-page__elements-title,
body.single-product .related-products h2 {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
	font-weight: 400 !important;
}
body.single-product .related-products .product-title,
body.single-product .related-products .portfolio-item .title a,
body.single-product .related-products .product-title a {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
}
body.single-product .related-products .product-title a:hover {
	color: var(--epi-naranja-hover) !important;
}
body.single-product .related-products a.product-category,
body.single-product .related-products .product-category,
body.single-product .related-products .category a {
	color: var(--epi-gris-texto) !important;
}

/* =====================================================================
   Ficha de producto 2026 — PLANTILLA PROPIA (.epi-producto)
   child/content-single-producto.php. Hero de 2 tarjetas (portada oscura +
   tarjeta blanca con categoría/título/extracto/Comparte), secciones apiladas
   con punto naranja, Descripción con "Ver más información" plegable, y
   "Productos relacionados" reutilizando las tarjetas del archivo (.epi-libros).
   ===================================================================== */

.epi-producto__wrap {
	max-width: 1212px;
	margin: 0 auto;
	padding: 28px 20px 72px;
	box-sizing: border-box;
}

/* Migas de pan */
.epi-producto__crumbs {
	font-family: var(--epi-font-2026);
	font-size: 13px;
	color: #7F7D76;
	margin-bottom: 20px;
}
.epi-producto__crumbs a {
	color: #7F7D76 !important;
	text-decoration: none !important;
}
.epi-producto__crumbs a:hover {
	color: var(--epi-naranja-hover) !important;
}
.epi-producto__crumbs-sep {
	margin: 0 8px;
}
.epi-producto__crumbs-current {
	color: var(--epi-negro);
}

/* ---------- Hero: portada (oscura) + tarjeta blanca ---------- */
.epi-producto__hero {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 8px;
	align-items: stretch;
	margin-bottom: 8px;
}

.epi-producto__cover {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #262626;
	border-radius: var(--epi-radio-card);
	padding: 40px;
	min-height: 360px;
	box-sizing: border-box;
}
.epi-producto .epi-producto__cover img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 380px !important;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
}

.epi-producto__info {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: var(--epi-radio-card);
	padding: 40px;
	box-sizing: border-box;
}

/* Chip de categoría (píldora con borde) */
.epi-producto__chip {
	align-self: flex-start;
	font-family: var(--epi-font-2026);
	font-size: 13px;
	color: var(--epi-negro) !important;
	text-decoration: none !important;
	background-color: #ffffff;
	border: 1px solid var(--epi-borde-suave);
	border-radius: var(--epi-radio-pill);
	padding: 6px 16px;
	margin-bottom: 20px;
}
a.epi-producto__chip:hover {
	background-color: var(--epi-gris-card);
}

.epi-producto__titulo {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	font-size: clamp(24px, 2.4vw, 32px) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}

.epi-producto__resumen {
	font-family: var(--epi-font-2026);
	font-size: 15px;
	line-height: 1.6;
	color: var(--epi-gris-texto);
	margin: 0;
}

/* "Comparte" pegado al pie de la tarjeta */
.epi-producto__info .epi-share {
	margin-top: auto;
	padding-top: 32px;
}

/* ---------- Secciones (punto naranja) ---------- */
.epi-producto__seccion {
	margin-top: 44px;
}

.epi-producto__seccion-titulo {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	font-size: clamp(24px, 2.2vw, 30px) !important;
	font-weight: 400 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
}
.epi-producto__seccion-titulo::before {
	content: '';
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--epi-naranja);
	margin-right: 14px;
}

/* Cabecera de sección con botón a la derecha (relacionados) */
.epi-producto__seccion-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.epi-producto__seccion-cabecera .epi-producto__seccion-titulo {
	margin-bottom: 0 !important;
}
.epi-producto__ver-todos {
	flex: 0 0 auto;
	font-family: var(--epi-font-2026);
	font-size: 14px;
	font-weight: 500;
	color: var(--epi-negro) !important;
	text-decoration: none !important;
	background-color: var(--epi-naranja);
	border-radius: var(--epi-radio-pill);
	padding: 10px 24px;
	transition: background-color .2s ease;
}
.epi-producto__ver-todos:hover {
	background-color: var(--epi-naranja-hover);
}

/* Tarjeta blanca de contenido */
.epi-producto__card {
	background-color: #ffffff;
	border-radius: var(--epi-radio-card);
	padding: 36px 40px;
	box-sizing: border-box;
}

/* Tipografía 2026 del contenido de la descripción */
.epi-producto__card .entry-content {
	font-family: var(--epi-font-2026);
	font-size: 16px;
	line-height: 1.65;
	color: var(--epi-gris-texto);
}
.epi-producto__card .entry-content p {
	margin: 0 0 16px;
}
.epi-producto__card .entry-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
	font-weight: 400 !important;
}
/* Enlaces del contenido: naranja con subrayado naranja (como en el blog).
   Se excluye el botón de descarga completa (.epi-producto__descarga). */
.epi-producto__card .entry-content a:not(.epi-producto__descarga) {
	color: rgba(246, 171, 22, 1) !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(246, 171, 22, 1) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.epi-producto__card .entry-content a:not(.epi-producto__descarga):hover {
	color: var(--epi-naranja-hover) !important;
	text-decoration-color: var(--epi-naranja-hover) !important;
}
/* Neutraliza azules inline (#0000ff / #000080) heredados, salvo enlaces */
.epi-producto__card .entry-content :is(h1, h2, h3, h4, h5, h6) span:not(a),
.epi-producto__card .entry-content span[style*="#0000ff" i]:not(a),
.epi-producto__card .entry-content span[style*="#000080" i]:not(a) {
	color: var(--epi-negro) !important;
}

/* Botón de descarga del LIBRO COMPLETO: único PDF con aspecto de botón
   (fondo naranja + icono download.svg). El resto de PDF (capítulos, títulos
   largos) quedan como enlaces naranja por la regla de arriba. La clase
   .epi-producto__descarga la añade content-single-producto.php al enlace cuyo
   texto es "Descargar el libro completo". */
.epi-producto__card .entry-content a.epi-producto__descarga {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--epi-naranja) !important;
	color: var(--epi-negro) !important;
	font-weight: 600;
	text-decoration: none !important;
	border-radius: var(--epi-radio-pill);
	padding: 13px 30px;
	margin: 8px 0;
	transition: background-color .2s ease;
}
.epi-producto__card .entry-content a.epi-producto__descarga::after {
	content: '';
	width: 18px;
	height: 18px;
	background: url('/wp-content/uploads/2026/07/download.svg') center / contain no-repeat;
}
.epi-producto__card .entry-content a.epi-producto__descarga:hover {
	background-color: var(--epi-naranja-hover) !important;
	color: var(--epi-negro) !important;
}

/* "Ver más información" (details/summary nativo) */
.epi-producto__mas {
	margin-top: 8px;
}
.epi-producto__mas-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-family: var(--epi-font-2026);
	font-size: 15px;
	font-weight: 500;
	color: var(--epi-gris-texto);
	padding: 6px 0;
	width: max-content;
}
.epi-producto__mas-toggle::-webkit-details-marker {
	display: none;
}
.epi-producto__mas-toggle::after {
	content: '';
	width: 14px;
	height: 14px;
	background: url('/wp-content/uploads/2026/07/arrow-down.svg') center / contain no-repeat;
	transition: transform .2s ease;
}
.epi-producto__mas[open] .epi-producto__mas-toggle::after {
	transform: rotate(180deg);
}
.epi-producto__desc-resto {
	margin-top: 20px;
}

/* Información adicional (tabla de atributos de WooCommerce) */
.epi-producto__info-adicional table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--epi-font-2026);
	font-size: 15px;
	color: var(--epi-gris-texto);
}
.epi-producto__info-adicional th,
.epi-producto__info-adicional td {
	text-align: left;
	padding: 12px 8px;
	border-bottom: 1px solid var(--epi-borde-suave);
}
.epi-producto__info-adicional th {
	color: var(--epi-negro);
	font-weight: 500;
	width: 30%;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.epi-producto__hero {
		grid-template-columns: 1fr;
	}
	.epi-producto__cover {
		min-height: 0;
		aspect-ratio: 3 / 4;
		padding: 32px;
	}
	.epi-producto__info,
	.epi-producto__card {
		padding: 28px 22px;
	}
	.epi-producto__info .epi-share {
		padding-top: 24px;
	}
}

@media (max-width: 600px) {
	.epi-producto__wrap {
		padding: 20px 16px 56px;
	}
	.epi-producto__seccion-cabecera {
		flex-wrap: wrap;
	}
}

/* =====================================================================
   Página "Sobre nosotros" (rediseño 2026)
   ===================================================================== */

/* ---------- Hero de Sobre nosotros ----------
   Comparte estructura con los heros de ThinkEPI / Infonomy (caja naranja a la
   izquierda + imagen redondeada a la derecha, igualadas en altura y apiladas
   al 100% en ≤1024px). La diferencia es que la caja no lleva un botón sino una
   lista de enlaces (icon-list), que se pega al fondo de la caja. */
.epi-hero-nosotros .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 560px;
	object-fit: cover;
	border-radius: 16px;
}

.epi-hero-nosotros .elementor-column:first-child > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	min-height: 560px;
}

/* La lista de enlaces (Código de ética, Políticas editoriales, Procesos de
   evaluación) queda pegada al final de la caja naranja. */
.epi-hero-nosotros .elementor-column:first-child .elementor-widget-icon-list {
	margin-top: auto;
}

/* La columna de la imagen pierde TODO el padding (incl. los ~21px laterales
   del gap de columna del theme): así la imagen queda a ras del borde de la
   columna y la separación visible con la caja naranja es solo el gap de 8px
   (mismo criterio que la sección Noticias de la home). */
.epi-hero-nosotros .elementor-column:last-child > .elementor-widget-wrap {
	padding: 0;
}

@media (max-width: 1024px) {
	.epi-hero-nosotros > .elementor-container,
	.epi-hero-nosotros .elementor-row {
		flex-wrap: wrap;
	}
	.epi-hero-nosotros .elementor-column {
		width: 100% !important;
	}
	/* La imagen es vertical (600×1071): a todo el ancho se hacía enorme.
	   La acotamos a 560px de alto (object-fit: cover ya recorta). */
	.epi-hero-nosotros .elementor-widget-image img {
		height: 560px;
	}
	/* 8px de separación entre la caja naranja y la imagen al apilarse. */
	.epi-hero-nosotros .elementor-column:last-child {
		margin-top: 8px;
	}
	.epi-hero-nosotros .elementor-column:first-child > .elementor-widget-wrap {
		min-height: 0;
	}
}

/* En móvil la imagen del hero se acota más (≈327px). */
@media (max-width: 767px) {
	.epi-hero-nosotros .elementor-widget-image img {
		height: 327px;
	}
}

/* ---------- Carrusel "Sobre el ecosistema SCImago" [epi_ecosistema] ----------
   Reutiliza el JS y la base de .epi-blog (scroll-snap, flechas, dots). Aquí:
   sin tarjeta naranja, controles DEBAJO y centrados, tipografía del mockup. */

/* La tarjeta: gap y padding de 24px dentro; radio 16px y gap 8px entre ellas
   ya vienen de .epi-blog__card / .epi-blog__track. */
.epi-eco__card {
	padding: 24px;
	gap: 24px;
	justify-content: flex-start;
}

/* Icono de producto: SVG con su propio fondo de color redondeado + glifo. */
.epi-eco__icono {
	display: block;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
}

/* Fallback: cuadro de color liso (cuando el 3er campo es un #color). */
.epi-eco__icono--color {
	border-radius: 12px;
	background-color: var(--eco-color, var(--epi-naranja));
}

.epi-eco__titulo,
.epi-eco__titulo a {
	font-family: var(--epi-font-2026) !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	color: rgba(8, 6, 2, 1) !important;   /* #080602 */
	text-decoration: none;
	margin: 0;
}

.epi-eco__titulo a:hover {
	color: var(--epi-naranja-hover) !important;
}

.epi-eco__texto {
	font-family: var(--epi-font-2026);
	font-size: 16px;
	line-height: 1.5;
	color: rgba(127, 125, 118, 1);        /* #7F7D76 */
	margin: 0;
}

/* Flecha ↗ en círculo, pegada al fondo de la tarjeta. */
.epi-eco__flecha {
	display: block;
	width: 40px;
	height: 40px;
	margin-top: auto;
	border-radius: 50%;
	background: var(--epi-gris-card) url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / 16px 16px no-repeat;
	transition: background-color .2s ease;
}

.epi-eco__flecha:hover {
	background-color: #E4E2DB;
}

/* Controles debajo y a la DERECHA: primero los dots, luego las flechas < >. */
.epi-eco__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 24px;
}

/* Separación entre el grupo de dots y las flechas (los dots quedan a la
   izquierda de las flechas, con aire entre ambos). */
.epi-eco__dots {
	margin-right: 24px;   /* sustituye el margin-right: 40px del carrusel del blog */
}

/* En escritorio (>1100px) mostramos 3 tarjetas completas + un "peek" de la 4ª
   (tarjetas un poco más anchas que el 25% del blog). Los breakpoints 3/2/1 de
   .epi-blog__card se conservan tal cual por debajo de 1100px (responsive
   intacto: 3 ≤1100, 2 ≤900, 1 ≤767). */
@media (min-width: 1101px) {
	.epi-eco__card {
		flex-basis: calc(30% - 6px);
	}
}

/* ---------- "Quienes somos": contenido real + "Ver más información" ----------
   Enlaces en negro con subrayado naranja (nada de azul/rojo); "Leer más" son
   enlaces, no botones. El listado de productos va plegado bajo un toggle gris
   (mismo patrón que la ficha de producto). */
.epi-quienes a {
	color: var(--epi-negro) !important;
	text-decoration: underline;
	text-decoration-color: var(--epi-naranja);
	text-underline-offset: 2px;
}
.epi-quienes a:hover {
	color: var(--epi-naranja-hover) !important;
}
.epi-quienes__item {
	margin: 20px 0 0;
}
.epi-quienes__item-titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: var(--epi-negro) !important;
	margin: 0 0 4px !important;
}
.epi-quienes__leermas {
	white-space: nowrap;
}

/* Toggle "Ver más información" (details/summary nativo) — variante reutilizable
   de la de producto, en gris. */
.epi-vermas {
	margin-top: 16px;
}
.epi-vermas__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-family: var(--epi-font-2026);
	font-size: 15px;
	font-weight: 500;
	color: var(--epi-gris-texto);
	padding: 6px 0;
	width: max-content;
}
.epi-vermas__toggle::-webkit-details-marker {
	display: none;
}
.epi-vermas__toggle::after {
	content: '';
	width: 14px;
	height: 14px;
	background: url('/wp-content/uploads/2026/07/arrow-down.svg') center / contain no-repeat;
	transition: transform .2s ease;
}
.epi-vermas[open] .epi-vermas__toggle::after {
	transform: rotate(180deg);
}
.epi-vermas__contenido {
	margin-top: 12px;
}

/* ---------- Página 404 (404.php del child theme) ----------
   Tarjeta naranja redondeada con el código 404, texto breve y botón blanco
   "Back to homepage" con flecha ↗. Diseño: Figma "404" (rediseño 2026). */

.epi-404 {
	max-width: 1212px;
	width: calc(100% - 32px);
	margin: 24px auto 96px; /* aire antes del footer (petición 21-07-2026) */
	font-family: var(--epi-font-2026);
}

.epi-404__card {
	background-color: var(--epi-naranja);
	border-radius: 24px;
	padding: 48px;
	min-height: 560px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.epi-404__titulo {
	font-family: var(--epi-font-2026) !important;
	font-size: clamp(36px, 4vw, 56px) !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	color: var(--epi-negro) !important;
	margin: 0 0 24px !important;
}

.epi-404__texto {
	font-family: var(--epi-font-2026);
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.35;
	color: var(--epi-negro);
	max-width: 900px;
	margin: 0 0 32px;
}

.epi-404__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #ffffff;
	color: var(--epi-negro) !important;
	border-radius: var(--epi-radio-pill);
	padding: 13px 24px;
	font-family: var(--epi-font-2026);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background-color .2s ease;
}

.epi-404__btn:hover,
.epi-404__btn:focus {
	background-color: var(--epi-gris-card);
	color: var(--epi-negro) !important;
}

@media (max-width: 767px) {
	.epi-404 {
		margin-bottom: 64px;
	}
	.epi-404__card {
		padding: 32px 24px;
		min-height: 380px;
	}
}

/* ==================================================================
   Firma del editor en entradas del blog (.epi-firma)
   La genera inc/firma-editor.php (filtro the_content) a partir del
   párrafo de firma que escriben los editores. Diseño según mockup:
   tarjeta gris #F8F7F5, radio 16px, padding 24px, gap 12px,
   texto 16px #080602, nombre 24px. Los enlaces heredan el naranja
   del cuerpo del single (.epi-single__content a).
   ================================================================== */

.epi-firma {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: var(--epi-fondo); /* rgba(248,247,245,1) */
	border-radius: var(--epi-radio-card); /* 16px */
	padding: 24px;
	margin: 2em 0 0;
}

/* !important: dentro de entradas Elementor el CSS del widget de texto
   (21px) es más específico y pisaba los tamaños del mockup. */
.epi-single__content .epi-firma p,
.epi-firma p {
	margin: 0;
	font-family: var(--epi-font-2026);
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--epi-negro) !important; /* rgba(8,6,2,1) */
	font-style: normal;
}

.epi-single__content .epi-firma p.epi-firma__nombre,
.epi-firma p.epi-firma__nombre {
	font-size: 24px !important;
	font-weight: 500;
	line-height: 1.2 !important;
}

/* ==================================================================
   Congresos CRECS y CoDi (fix-congresos-chips-tmp.php v2/v3)
   v3 (22-07-2026, petición del usuario): el fondo blanco GLOBAL de la
   plantilla de páginas antiguas (.epi-page__body) se retira SOLO en
   estas páginas (:has(.epi-congreso)); el cuadro blanco redondeado 16px
   queda únicamente para el texto (sección raíz .epi-congreso), y los
   chips contrastan directamente sobre el fondo crema, sin banda gris
   (patrón Infonomy). Navegadores sin :has(): degradación aceptable
   (todo sigue dentro del cuadro blanco global, como antes).
   ================================================================== */

.epi-page__body:has(.epi-congreso) {
	background-color: transparent;
	/* padding-bottom y no margin en la sección de chips: los márgenes
	   colapsaban con el del wrapper y no sumaban aire (petición 22-07:
	   ~80px de respiro bajo los enlaces, como sobre ellos). */
	padding: 0 0 24px;
}

/* La sección del texto traía margin-bottom:100px de los ajustes
   originales; se iguala al aire inferior de los chips (~80px). */
.epi-congreso {
	margin-bottom: 80px !important;
}

/* Ancho completo del rediseño: .epi-page ya capa a 1212px y en
   resoluciones pequeñas baja a calc(100% - 32px), así que aquí basta
   ocupar el 100% disponible (petición 22-07: a 848px quedaba estrecho). */
.epi-congreso > .elementor-container {
	max-width: 100% !important; /* otra regla fija 1212px */
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 32px 40px;
	box-sizing: border-box;
}

/* La sección de chips ya no lleva banda gris. El override cubre los
   entornos donde el handler v2 llegó a guardarla en Elementor. */
.epi-congresos-recursos {
	background-color: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-bottom: 0 !important; /* el aire lo da el padding del wrapper */
}

.epi-congresos-recursos h2.elementor-heading-title {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	font-size: clamp(24px, 2.2vw, 30px) !important;
	font-weight: 400 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important; /* TheGem pone uppercase */
	margin-bottom: 16px;
}

.epi-congresos-recursos h2.elementor-heading-title::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--epi-naranja);
	margin-right: 16px;
	vertical-align: middle;
}

@media (max-width: 767px) {
	.epi-congreso > .elementor-container {
		padding: 24px 20px;
	}
}

/* ============================================================
   Página "Cómo trabajamos" (/como-trabajamos/) — 2026
   ============================================================
   La página es UNA sola sección de Elementor con contenido antiguo:
   arriba tres botones de TheGem (Código de ética, Políticas editoriales,
   Procesos de evaluación) y en el cuerpo botones de Elementor
   (Ir al Anuario ThinkEPI, Ir a la revista, Ir al Directorio EXIT,
   Ir a las listas de correo-e).

   El handler epi_fix_comotrabajamos le añade a esa sección las clases
       epi-2026 epi-comotrabajamos
   con lo que entra el ámbito del rediseño (tipografía, fondo, colores).
   Aquí van solo los ajustes propios de esta página.

   ¡¡NO CAMBIAR epi-2026 POR epi-2026-start EN ESTA PÁGINA!!  page.php y
   page-fullwidth.php del child theme hacen
       $epi_legacy = ( false === strpos( $epi_data, 'epi-2026-start' ) );
   y a las páginas que contienen esa cadena las pintan con la banda roja de
   thegem_page_title() y el footer ANTIGUO (get_footer() en vez de
   get_footer('epi')). Como ésta es una página antigua adaptada, tiene que
   seguir en la rama "legacy" (hero naranja .epi-page + footer 2026), y
   epi-2026 da exactamente el mismo ámbito de CSS sin activar esa rama.
   (Bug detectado en vivo el 03-08-2026.)

   DECISIÓN (03-08-2026): en esta página NO se quieren botones. Todos —los
   de arriba y los del cuerpo— se ven como ENLACES con la flecha ↗
   (arrow-corner-right-up.svg) al final, como las listas de enlaces del
   resto del site. Se resuelve entero por CSS: NO hace falta estilo inline.

   (El prefijo :is(#epi-2026-start, …) de los selectores de abajo es solo un
   truco de ESPECIFICIDAD; no hace falta que ese id exista en la página.)

   OJO CON LA ESPECIFICIDAD: la regla global de botones (bloque "Botones")
   usa  :is(..., #epi-2026-start ~ .elementor-element)  y ese :is() arrastra
   especificidad de ID, así que un selector solo de clases NO la pisa por
   mucho !important que lleve (probado en vivo). Por eso estos selectores
   empiezan por  :is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos :
   aporta la especificidad de ID sin depender de que ese id exista. */

/* ---- 1. Botones de TheGem de arriba → enlaces con flecha ---- */

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .gem-button-container {
	width: auto !important;
	text-align: left !important;
}

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next),
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next):visited {
	display: inline-block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--epi-negro) !important;
	font-family: var(--epi-font-2026) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: left !important;
}

/* TheGem envuelve el texto en spans internos con estilos propios */
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button .gem-inner-wrapper-btn,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button span {
	display: inline !important;
	background: none !important;
	background-color: transparent !important;
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button::after,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button::before {
	box-shadow: none !important;
	background-color: transparent !important;
}

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button::after {
	content: '' !important;
	display: inline-block !important;
	width: 15px;
	height: 15px;
	margin-left: 10px;
	vertical-align: -2px;
	opacity: 1 !important;
	background: url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / contain no-repeat !important;
}

/* El :hover global de botones (bloque "Botones") es
   :is(…) .gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next):hover
   y pinta el fondo naranja. Para pisarlo hay que REPETIR los dos :not(),
   si no gana él y al sobrevolar sale la caja naranja (visto el 03-08-2026).
   Con esto el hover queda igual que el de los enlaces del cuerpo: solo
   cambia el color del texto a naranja, sin fondo. */
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next):hover,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next):focus,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:not(.gem-blog-slider-prev):not(.gem-blog-slider-next):active {
	color: var(--epi-naranja-hover) !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

/* TheGem pinta el relleno del botón con capas internas (.gem-inner-wrapper-btn
   y ::before del propio enlace): también hay que neutralizarlas en hover. */
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:hover .gem-inner-wrapper-btn,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:hover span,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:focus .gem-inner-wrapper-btn,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:focus span {
	background: none !important;
	background-color: transparent !important;
	color: inherit !important;
}

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:hover::before,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos a.gem-button:focus::before {
	content: none !important;
	background: none !important;
	background-color: transparent !important;
}

/* Aire entre los tres enlaces (antes lo daba la caja del botón) */
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-thegem-styledbutton {
	margin-bottom: 4px;
}

/* ---- 2. Botones de Elementor del cuerpo → enlaces con flecha ---- */

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-button .elementor-button,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-button .elementor-button:visited {
	display: inline-block !important;
	width: auto !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: var(--epi-negro) !important;
	font-family: var(--epi-font-2026) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
}

/* La regla global pone la flecha como carácter " ↗ "; aquí se sustituye
   por el SVG arrow-corner-right-up (mismo que las listas de enlaces). */
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-button .elementor-button-text::after {
	content: '' !important;
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 10px;
	vertical-align: -2px;
	background: url('/wp-content/uploads/2026/07/arrow-corner-right-up.svg') center / contain no-repeat;
}

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-button .elementor-button:hover,
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-button .elementor-button:focus {
	background: none !important;
	background-color: transparent !important;
	color: var(--epi-naranja-hover) !important;
}

/* Los botones del cuerpo iban dentro de su propio bloque con mucho aire */
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-button {
	margin-bottom: 8px;
}

/* ---- 3. Subtítulos del cuerpo (Grupo ThinkEPI, Infonomy, Directorio
          EXIT, Listas de correo-e): venían en rojo #ff0000 con estilo
          inline de la web antigua. Se neutraliza el rojo por CSS —el
          estilo inline se deja intacto en la BD— y se les da presencia
          de título de sección 2026. ---- */

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-text-editor span[style*="#ff0000"],
:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-text-editor span[style*="rgb(255, 0, 0)"] {
	color: var(--epi-negro) !important;
	font-style: normal !important;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

/* ---- 4. Enlaces dentro del texto: negro con subrayado naranja, igual
          que .epi-lista-body en el resto del site ---- */

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-text-editor a {
	color: var(--epi-negro) !important;
	text-decoration: underline;
	text-decoration-color: var(--epi-naranja);
	text-underline-offset: 3px;
}

:is(#epi-2026-start, .epi-comotrabajamos).epi-comotrabajamos .elementor-widget-text-editor a:hover {
	color: var(--epi-naranja-hover) !important;
}


/* ============================================================================
   COMPLIANZ (RGPD) — adaptación al diseño 2026
   ============================================================================
   Cubre las tres piezas visibles del plugin:
     1. Variables del banner de consentimiento (se declaran con html:root para
        ganar en especificidad al :root que genera Complianz en
        /uploads/complianz/css/banner-*.css, sea cual sea el orden de carga).
     2. Retoques estructurales del banner y de la pestaña flotante
        «Configuración de cookies».
     3. Tabla de cookies del shortcode [cmplz-cookies] (#cmplz-cookies-overview),
        que se usa en /cookies/ dentro de un cuadro .epi-lista-body.

   OJO: para que Complianz encole su CSS de documento en páginas de Elementor
   hace falta inc/complianz-2026.php (el plugin busca el shortcode en
   post_content y en Elementor vive en _elementor_data).
   ---------------------------------------------------------------------- */

/* ---- 1. Variables del banner ---- */

html:root {
	--cmplz_banner_width: 520px;
	--cmplz_banner_background_color: #FFFFFF;
	--cmplz_banner_border_color: var(--epi-borde-suave);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: var(--epi-radio-card);
	--cmplz_banner_margin: 20px;

	--cmplz_title_font_size: 20px;
	--cmplz_text_font_size: 14px;
	--cmplz_link_font_size: 14px;
	--cmplz_category_body_font_size: 14px;
	--cmplz_category_header_title_font_size: 15px;
	--cmplz_category_header_active_font_size: 13px;
	--cmplz_button_font_size: 15px;

	--cmplz_text_color: var(--epi-negro);
	--cmplz_hyperlink_color: var(--epi-negro);
	--cmplz_category_header_always_active_color: #6E5600;

	/* Aceptar = píldora naranja con texto negro (botón primario del 2026) */
	--cmplz_button_accept_background_color: var(--epi-naranja);
	--cmplz_button_accept_border_color: var(--epi-naranja);
	--cmplz_button_accept_text_color: var(--epi-negro);
	/* Rechazar = píldora blanca con borde negro (mismo peso visual: el rechazo
	   debe ser tan accesible como la aceptación) */
	--cmplz_button_deny_background_color: #FFFFFF;
	--cmplz_button_deny_border_color: var(--epi-negro);
	--cmplz_button_deny_text_color: var(--epi-negro);
	/* Ver preferencias = píldora gris clara */
	--cmplz_button_settings_background_color: var(--epi-gris-card);
	--cmplz_button_settings_border_color: var(--epi-gris-card);
	--cmplz_button_settings_text_color: var(--epi-negro);
	--cmplz_button_border_radius: var(--epi-radio-pill);

	--cmplz_slider_active_color: var(--epi-naranja);
	--cmplz_slider_inactive_color: #C9C7C1;
	--cmplz_slider_bullet_color: #FFFFFF;

	--cmplz-manage-consent-height: 46px;
	--cmplz-manage-consent-offset: -30px;
}

/* ---- 2. Banner de consentimiento ---- */

.cmplz-cookiebanner,
.cmplz-cookiebanner :is(div, span, p, a, button, label, h2, h3) {
	font-family: var(--epi-font-2026) !important;
}

.cmplz-cookiebanner {
	padding: 24px !important;
	box-shadow: 0 16px 40px rgba(8, 6, 2, .14) !important;
}

.cmplz-cookiebanner .cmplz-header .cmplz-title {
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.cmplz-cookiebanner .cmplz-divider {
	background-color: var(--epi-borde-suave) !important;
}

.cmplz-cookiebanner .cmplz-btn {
	border-radius: var(--epi-radio-pill) !important;
	border-width: 1px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	padding: 11px 24px !important;
	transition: background-color .2s ease, border-color .2s ease;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:focus {
	background-color: var(--epi-naranja-hover) !important;
	border-color: var(--epi-naranja-hover) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:focus,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
	background-color: var(--epi-gris-card) !important;
}

/* Enlaces del banner: subrayado naranja, como en el resto del site */
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-body a {
	text-decoration: underline !important;
	text-decoration-color: var(--epi-naranja) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.cmplz-cookiebanner .cmplz-links a:hover,
.cmplz-cookiebanner .cmplz-body a:hover {
	color: var(--epi-naranja-hover) !important;
	text-decoration-color: var(--epi-naranja-hover) !important;
}

.cmplz-cookiebanner .cmplz-category {
	background-color: var(--epi-gris-card) !important;
	border-radius: 10px !important;
	overflow: hidden;
}

/* ---- 3. Pestaña flotante «Configuración de cookies» ---- */

#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--epi-font-2026) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--epi-negro) !important;
	background-color: #FFFFFF !important;
	border: 1px solid var(--epi-borde-suave) !important;
	border-bottom: 0 !important;
	border-radius: 12px 12px 0 0 !important;
	box-shadow: 0 -6px 20px rgba(8, 6, 2, .10);
	padding: 12px 22px !important;
	transition: background-color .2s ease, color .2s ease;
}

#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus {
	background-color: var(--epi-naranja) !important;
	border-color: var(--epi-naranja) !important;
	color: var(--epi-negro) !important;
}

/* ---- 4. Documento legal de Complianz ([cmplz-document]) ----
   Es la página /politica-de-cookies-ue/, que usa la plantilla epi-page (hero
   naranja + cuerpo), no Elementor. Complianz le pone max-width:800px. */

.epi-page__body #cmplz-document,
.epi-page__body .cmplz-document {
	max-width: none !important;
}

.epi-page__body #cmplz-document :is(h2, h3, h4) {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
}

.epi-page__body #cmplz-document h2 {
	font-size: 26px !important;
	margin-top: 36px !important;
}

.epi-page__body #cmplz-document h3 {
	font-size: 20px !important;
	margin-top: 24px !important;
}

.epi-page__body #cmplz-document p {
	color: var(--epi-gris-texto);
	line-height: 1.6;
}

.epi-page__body #cmplz-document p a:not(.cmplz-link) {
	color: var(--epi-negro) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--epi-naranja) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ---- 5. Tabla de cookies (#cmplz-cookies-overview) ----
   Se usa tanto dentro de [cmplz-document] como del shortcode [cmplz-cookies]. */

#cmplz-cookies-overview {
	margin-top: 8px;
}

#cmplz-cookies-overview .cmplz-dropdown {
	background-color: var(--epi-gris-card) !important;
	border: 1px solid var(--epi-borde-suave) !important;
	border-radius: var(--epi-radio-card) !important;
	padding: 18px 22px !important;
	margin-bottom: 12px !important;
}

#cmplz-cookies-overview .cmplz-dropdown summary {
	list-style: none;
	cursor: pointer;
}

#cmplz-cookies-overview .cmplz-dropdown summary::-webkit-details-marker {
	display: none;
}

#cmplz-cookies-overview .cmplz-dropdown summary > div {
	display: grid;
	grid-template-columns: 1fr 24px;
	align-items: center;
	gap: 12px;
}

#cmplz-cookies-overview .cmplz-dropdown summary h3 {
	font-family: var(--epi-font-2026) !important;
	font-size: 19px !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em;
	color: var(--epi-negro) !important;
	margin: 0 !important;
}

#cmplz-cookies-overview .cmplz-dropdown summary p {
	font-size: 14px;
	color: var(--epi-gris-texto);
	margin: 2px 0 0;
	grid-column: 1;
}

/* El chevron lo dibuja Complianz (chevron-down.svg en document.css); aquí solo
   se alinea a la derecha de la cabecera. No añadir uno propio: se duplicaría. */
#cmplz-cookies-overview .cmplz-dropdown summary > div::after {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: center;
}

#cmplz-cookies-overview .cmplz-dropdown :is(h4, h5) {
	font-family: var(--epi-font-2026) !important;
	color: var(--epi-negro) !important;
}

#cmplz-cookies-overview .cmplz-dropdown :is(.cmplz-service-description, .cmplz-sharing-data) h4 {
	font-size: 15px !important;
	font-weight: 500 !important;
	margin: 18px 0 4px !important;
}

#cmplz-cookies-overview .cmplz-dropdown :is(.cmplz-service-description, .cmplz-sharing-data) p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--epi-gris-texto);
	margin: 0;
}

/* Ficha de cada cookie: pares etiqueta / valor en dos columnas.
   Se anula la retícula de 3 columnas de Complianz (que superpone las
   cabeceras cuando un servicio tiene más de una cookie) y su decoración de
   tabla (borde y separadores grises de 1px, celdas blancas y zebra). */
#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose {
	display: grid !important;
	grid-template: none !important;
	grid-template-columns: minmax(100px, max-content) 1fr !important;
	grid-column: auto !important;
	grid-gap: 0 !important;
	column-gap: 24px !important;
	border: 0 !important;
	background-color: #FFFFFF !important;
	border-radius: 12px;
	margin: 18px 0 0 !important;
	padding: 16px 20px;
}

#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > * {
	grid-area: auto !important;
	background-color: transparent !important;
	padding: 6px 0 !important;
}

#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > .purpose {
	grid-column: 1 / -1 !important;
	padding-top: 0 !important;
}

#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > .purpose h4 {
	font-size: 16px !important;
	font-weight: 500 !important;
	margin: 0 0 4px !important;
}

#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > :is(.name-header, .retention-header, .function-header) {
	grid-column: 1 !important;
}

#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > :is(.name, .retention, .function) {
	grid-column: 2 !important;
	font-size: 14px;
	line-height: 1.5;
	color: var(--epi-negro);
	overflow-wrap: anywhere;
}

#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > :is(.name-header, .retention-header, .function-header) h5 {
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	color: var(--epi-gris-texto) !important;
	margin: 0 !important;
}

/* Línea separadora al inicio de cada cookie del mismo servicio */
#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > .name-header,
#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > .name {
	border-top: 1px solid var(--epi-borde-suave) !important;
	margin-top: 6px;
	padding-top: 12px !important;
}

/* La primera cookie ya va separada del título del propósito */
#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > .purpose + .name-header,
#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > .purpose + .name-header + .name {
	border-top: 0 !important;
	margin-top: 0;
}

#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > .name a {
	color: var(--epi-negro) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--epi-naranja) !important;
	text-underline-offset: 3px;
}

/* En la página de cookies el bloque va dentro del cuadro blanco
   .epi-lista-body: ahí la tarjeta gris se ve mejor sin borde extra. */
.epi-lista-body #cmplz-cookies-overview .cmplz-dropdown {
	border-color: transparent;
}

@media (max-width: 600px) {
	#cmplz-cookies-overview .cmplz-dropdown {
		padding: 16px;
	}
	#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose {
		grid-template-columns: 1fr !important;
		padding: 14px 16px;
	}
	#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > * {
		grid-column: 1 !important;
	}
	#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > :is(.name-header, .retention-header, .function-header) {
		padding-bottom: 0;
	}
	#cmplz-cookies-overview .cmplz-dropdown-cookiepolicy .cookies-per-purpose > .name {
		border-top: 0;
		margin-top: 0;
		padding-top: 0;
	}
}