/**
 * GPG · Medios Publicitarios
 *
 * Todos los selectores parten de .gpg-medios-widget para ganar especificidad frente
 * al tema y a Elementor, y para no afectar a ningún elemento fuera del widget.
 * Paleta y tipografía según «Directrices Visuales y UI 2026 – GPG».
 */

.gpg-medios-widget {
	--gpg-background: #e6e7eb;
	--gpg-dark: #181b1f;
	--gpg-secondary-dark: #1f2937;
	--gpg-accent: #004e5a;
	--gpg-white: #ffffff;

	--gpg-line: rgba(24, 27, 31, 0.13);
	--gpg-ink: #181b1f;
	--gpg-ink-soft: rgba(24, 27, 31, 0.55);
	--gpg-on-dark-soft: rgba(255, 255, 255, 0.76);

	--gpg-radius: 14px;
	--gpg-height: clamp(460px, 64vh, 640px);
	/* Alto de cada renglón de la cuadrícula. */
	--gpg-fila: clamp(300px, 33vh, 400px);
	/* Banda izquierda reservada en la vista ampliada: «Volver» + columna de texto. */
	--gpg-reserva: 30%;
	--gpg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--gpg-speed: 0.55s;

	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--gpg-ink);
	-webkit-font-smoothing: antialiased;
}

.gpg-medios-widget *,
.gpg-medios-widget *::before,
.gpg-medios-widget *::after {
	box-sizing: border-box;
}

.gpg-medios-widget img {
	display: block;
	max-width: 100%;
	border-radius: 0;
	box-shadow: none;
	filter: none;
}

.gpg-medios-widget figure,
.gpg-medios-widget p {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------- Contenedor */

.gpg-medios-widget .gpg-medios__shell {
	position: relative;
	overflow: hidden;
	border-radius: var(--gpg-radius);
	background: var(--gpg-line);
}

/* -------------------------------------------------------------- Cuadrícula */

.gpg-medios-widget .gpg-medios__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--gpg-line);
	transition: opacity 0.35s ease, transform 0.45s var(--gpg-ease);
}

.gpg-medios-widget .gpg-medios__grid.is-hidden {
	opacity: 0;
	transform: scale(0.992);
	pointer-events: none;
}

.gpg-medios-widget .gpg-medios__grid[hidden] {
	display: none;
}

.gpg-medios-widget .gpg-medios__item {
	display: flex;
	/* min-width fija cuatro por renglón (cinco no caben) y a la vez permite que
	   el medio activo se ensanche dentro de su propio renglón. */
	flex: 1 1 0;
	min-width: 21%;
	height: var(--gpg-fila);
	background: var(--gpg-background);
	transition: flex-grow var(--gpg-speed) var(--gpg-ease);
}

.gpg-medios-widget .gpg-medios__card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: clamp(14px, 1.5vw, 24px);
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--gpg-background) !important;
	color: var(--gpg-ink);
	font: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	transition: background-color 0.4s ease, color 0.4s ease;
}

/* Barra superior de énfasis: aparece sólo en el medio activo. */
.gpg-medios-widget .gpg-medios__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gpg-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--gpg-ease);
}

/**
 * La imagen se posiciona en absoluto: así su proporción natural nunca define
 * la altura de la ficha y las ocho quedan con exactamente la misma área visual,
 * incluso al ampliarse.
 */
.gpg-medios-widget .gpg-medios__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

.gpg-medios-widget .gpg-medios__media .gpg-medios__img {
	position: absolute;
	inset: 6% 2%;
	width: auto;
	height: auto;
	max-width: 96%;
	max-height: 88%;
	margin: auto;
	object-fit: contain;
	object-position: center;
	transition: transform 0.6s var(--gpg-ease);
}

.gpg-medios-widget .gpg-medios__media-vacia {
	position: absolute;
	inset: 8%;
	background: rgba(24, 27, 31, 0.05);
}

/* La etiqueta reserva altura para dos líneas: los nombres nunca desplazan la imagen. */
.gpg-medios-widget .gpg-medios__label {
	display: block;
	flex: none;
}

.gpg-medios-widget .gpg-medios__name {
	display: block;
	min-height: 2.5em;
	font-size: clamp(14px, 0.98vw, 17px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	overflow-wrap: break-word;
	hyphens: auto;
	transition: color 0.4s ease;
}

.gpg-medios-widget .gpg-medios__cue {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 6px;
	color: var(--gpg-ink-soft);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.4s ease;
}

.gpg-medios-widget .gpg-medios__cue-text {
	white-space: nowrap;
}

.gpg-medios-widget .gpg-medios__arrow {
	flex: none;
	transition: transform 0.4s var(--gpg-ease);
}

/* ------------------------------------------------- Estado activo / interacción */

/**
 * El medio activo se rellena de blanco puro, no del color institucional:
 * las imágenes de los medios son en su mayoría teales u oscuras y se
 * confundían con el fondo. El énfasis se da con la barra de acento, el
 * color del texto y la ampliación horizontal.
 */
.gpg-medios-widget .gpg-medios__item:focus-within .gpg-medios__card,
.gpg-medios-widget .gpg-medios__item.is-auto .gpg-medios__card {
	background: var(--gpg-white) !important;
}

.gpg-medios-widget .gpg-medios__item:focus-within .gpg-medios__card::before,
.gpg-medios-widget .gpg-medios__item.is-auto .gpg-medios__card::before {
	transform: scaleX(1);
}

.gpg-medios-widget .gpg-medios__item:focus-within .gpg-medios__name,
.gpg-medios-widget .gpg-medios__item.is-auto .gpg-medios__name,
.gpg-medios-widget .gpg-medios__item:focus-within .gpg-medios__cue,
.gpg-medios-widget .gpg-medios__item.is-auto .gpg-medios__cue {
	color: var(--gpg-accent);
}

.gpg-medios-widget .gpg-medios__item:focus-within .gpg-medios__arrow,
.gpg-medios-widget .gpg-medios__item.is-auto .gpg-medios__arrow {
	transform: translateX(3px);
}

.gpg-medios-widget .gpg-medios__item:focus-within .gpg-medios__img,
.gpg-medios-widget .gpg-medios__item.is-auto .gpg-medios__img {
	transform: scale(1.06);
}

.gpg-medios-widget .gpg-medios__card:focus-visible {
	outline: 2px solid var(--gpg-accent);
	outline-offset: -5px;
}

@media (hover: hover) and (pointer: fine) {
	.gpg-medios-widget .gpg-medios__item:hover .gpg-medios__card {
		background: var(--gpg-white) !important;
	}

	.gpg-medios-widget .gpg-medios__item:hover .gpg-medios__card::before {
		transform: scaleX(1);
	}

	.gpg-medios-widget .gpg-medios__item:hover .gpg-medios__name,
	.gpg-medios-widget .gpg-medios__item:hover .gpg-medios__cue {
		color: var(--gpg-accent);
	}

	.gpg-medios-widget .gpg-medios__item:hover .gpg-medios__arrow {
		transform: translateX(3px);
	}

	.gpg-medios-widget .gpg-medios__item:hover .gpg-medios__img {
		transform: scale(1.06);
	}
}

/* Expansión horizontal: sólo en escritorio, donde caben los ocho en un renglón. */
@media (min-width: 1200px) {
	.gpg-medios-widget .gpg-medios__item:focus-within,
	.gpg-medios-widget .gpg-medios__item.is-auto {
		flex-grow: 2.4;
	}

	/* El recorrido automático se mueve más despacio que el cursor. */
	.gpg-medios-widget .gpg-medios__item.is-auto,
	.gpg-medios-widget .gpg-medios__grid.is-auto-activo .gpg-medios__item {
		transition-duration: 0.9s;
	}
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	.gpg-medios-widget .gpg-medios__item:hover {
		flex-grow: 2.4;
	}
}

/* ---------------------------------------------------------- Vista ampliada */

.gpg-medios-widget .gpg-medios__detail {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--gpg-height);
	padding: clamp(22px, 3vw, 56px);
	background: var(--gpg-accent);
	color: var(--gpg-white);
	overflow: hidden;
	/* Permite dimensionar la tipografía de fondo respecto al contenedor, no a la ventana. */
	container-type: inline-size;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s ease, transform 0.5s var(--gpg-ease);
}

.gpg-medios-widget .gpg-medios__detail[hidden] {
	display: none;
}

.gpg-medios-widget .gpg-medios__detail.is-open {
	opacity: 1;
	transform: none;
}

/**
 * Degradado radial centrado en el eje de la imagen: aclara el centro y oscurece
 * los extremos, de modo que la imagen se separa del fondo y gana profundidad.
 */
.gpg-medios-widget .gpg-medios__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse 50% 60% at 60% 50%,
			rgba(255, 255, 255, 0.4),
			rgba(255, 255, 255, 0.13) 42%,
			rgba(255, 255, 255, 0) 66%
		),
		radial-gradient(
			ellipse 108% 104% at 60% 50%,
			rgba(0, 0, 0, 0) 34%,
			rgba(0, 0, 0, 0.46) 100%
		);
	pointer-events: none;
}

/* La palabra de fondo es el elemento protagonista, como en la referencia. */
.gpg-medios-widget .gpg-medios__watermark {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	/**
	 * Una palabra arriba y otra abajo, como en la referencia: así la columna de
	 * texto queda en la banda central, libre de la tipografía de fondo.
	 */
	justify-content: space-between;
	/**
	 * La banda izquierda queda reservada para el control «Volver» y la columna de
	 * texto; la palabra se centra en el espacio restante y comparte eje visual con
	 * la imagen. El tamaño se limita por el ancho del contenedor y por el alto real
	 * del lienzo, de modo que nunca invade esa banda ni las palabras se solapan.
	 */
	padding: 1.5% 3% 1% var(--gpg-reserva);
	font-size: min(var(--gpg-wm, 11vw), calc(var(--gpg-height) * 0.3));
	font-weight: 700;
	line-height: 0.82;
	letter-spacing: -0.045em;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

@supports (container-type: inline-size) {
	.gpg-medios-widget .gpg-medios__watermark {
		font-size: min(var(--gpg-wm-cq, 11cqw), calc(var(--gpg-height) * 0.3));
	}
}

/* Con una sola línea, la palabra se centra verticalmente. */
.gpg-medios-widget .gpg-medios__watermark:not(:has(.gpg-medios__watermark-2)) {
	justify-content: center;
}

.gpg-medios-widget .gpg-medios__watermark-1 {
	color: rgba(255, 255, 255, 0.9);
}

.gpg-medios-widget .gpg-medios__watermark-2 {
	color: rgba(255, 255, 255, 0.34);
}

/* La imagen del medio va por delante de la palabra de fondo. */
/**
 * Marco de altura fija: normaliza las ocho proporciones (de 0.51 a 2.79) en una
 * misma área. Así el solape con la tipografía de fondo es idéntico en todos los
 * medios y no depende de la forma de cada imagen. Se desplaza a la derecha del
 * centro para que las primeras letras del nombre queden siempre despejadas.
 */
.gpg-medios-widget .gpg-medios__detail-media {
	position: absolute;
	top: 50%;
	left: 60%;
	z-index: 2;
	width: min(50%, 680px);
	height: 64%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform 0.7s var(--gpg-ease);
}

.gpg-medios-widget .gpg-medios__detail-media .gpg-medios__img {
	width: 100%;
	height: 100%;
	max-height: none;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

.gpg-medios-widget .gpg-medios__detail-copy {
	position: relative;
	z-index: 3;
	/* Siempre más estrecha que la banda reservada: la palabra nunca la alcanza. */
	width: calc(var(--gpg-reserva) - 4%);
	max-width: 360px;
}

.gpg-medios-widget .gpg-medios__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.gpg-medios-widget .gpg-medios__eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: rgba(255, 255, 255, 0.45);
}

.gpg-medios-widget .gpg-medios__title {
	margin: 0 0 16px;
	color: var(--gpg-white);
	font-family: inherit;
	font-size: clamp(24px, 2.1vw, 34px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-transform: none;
}

.gpg-medios-widget .gpg-medios__desc {
	max-width: 34ch;
	margin: 0 0 clamp(20px, 2.8vh, 32px);
	color: var(--gpg-on-dark-soft);
	font-size: clamp(15px, 1.05vw, 17px);
	font-weight: 400;
	line-height: 1.5;
}

/* Botón principal: contorno blanco sobre el color institucional. */
.gpg-medios-widget .gpg-medios__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--gpg-white) !important;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.gpg-medios-widget .gpg-medios__button:hover,
.gpg-medios-widget .gpg-medios__button:focus-visible {
	border-color: var(--gpg-white) !important;
	background: var(--gpg-white) !important;
	color: var(--gpg-accent) !important;
}

.gpg-medios-widget .gpg-medios__button:hover .gpg-medios__arrow {
	transform: translateX(3px);
}

.gpg-medios-widget .gpg-medios__button:focus-visible {
	outline: 2px solid var(--gpg-white);
	outline-offset: 3px;
}

/* Volver: dentro de la paleta, sin depender de los estilos de botón del tema. */
.gpg-medios-widget .gpg-medios__back {
	position: absolute;
	top: clamp(18px, 2.4vw, 34px);
	left: clamp(20px, 3vw, 56px);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 10px 18px 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.8) !important;
	font: inherit;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.gpg-medios-widget .gpg-medios__back:hover,
.gpg-medios-widget .gpg-medios__back:focus-visible {
	border-color: var(--gpg-white) !important;
	background: var(--gpg-white) !important;
	color: var(--gpg-accent) !important;
}

.gpg-medios-widget .gpg-medios__back:hover .gpg-medios__arrow {
	transform: translateX(-3px);
}

.gpg-medios-widget .gpg-medios__back:focus-visible {
	outline: 2px solid var(--gpg-white);
	outline-offset: 3px;
}

/**
 * Microinteracción de la vista ampliada: al pasar el cursor, el nombre de fondo
 * crece un poco y la imagen cede un poco de tamaño, de modo que la composición
 * respira y el nombre se lee mejor justo cuando el visitante está mirando.
 */
.gpg-medios-widget .gpg-medios__watermark {
	transition: transform 0.7s var(--gpg-ease);
	transform-origin: 58% center;
}

/* Sólo en escritorio, donde vive la composición superpuesta. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	.gpg-medios-widget .gpg-medios__detail:hover .gpg-medios__watermark {
		transform: scale(1.035);
	}

	.gpg-medios-widget .gpg-medios__detail:hover .gpg-medios__watermark-1 {
		color: rgba(255, 255, 255, 0.96);
	}

	.gpg-medios-widget .gpg-medios__detail:hover .gpg-medios__watermark-2 {
		color: rgba(255, 255, 255, 0.4);
	}

	.gpg-medios-widget .gpg-medios__detail:hover .gpg-medios__detail-media {
		transform: translate(-50%, -50%) scale(0.965);
	}
}

.gpg-medios-widget .gpg-medios__watermark-1,
.gpg-medios-widget .gpg-medios__watermark-2 {
	transition: color 0.7s ease;
}

/**
 * En pantallas táctiles no hay cursor, de modo que la microinteracción no puede
 * depender del hover: se ejecuta una vez al abrir el medio, con el mismo gesto
 * (el nombre cede tamaño mientras la imagen lo gana) para que la composición
 * también «respire» al entrar.
 */
@keyframes gpg-medios-entra-nombre {
	from {
		transform: scale(1.035);
	}

	to {
		transform: scale(1);
	}
}

@keyframes gpg-medios-entra-imagen {
	from {
		transform: scale(0.965);
	}

	to {
		transform: scale(1);
	}
}

@keyframes gpg-medios-entra-imagen-centrada {
	from {
		transform: translate(-50%, -50%) scale(0.965);
	}

	to {
		transform: translate(-50%, -50%) scale(1);
	}
}

@media (hover: none), (pointer: coarse) {
	.gpg-medios-widget .gpg-medios__detail.is-open .gpg-medios__watermark {
		animation: gpg-medios-entra-nombre 1.5s var(--gpg-ease) 0.12s both;
	}

	.gpg-medios-widget .gpg-medios__detail.is-open .gpg-medios__detail-media {
		animation: gpg-medios-entra-imagen 1.5s var(--gpg-ease) 0.12s both;
	}
}

/* Composición superpuesta: la animación conserva el centrado de la imagen. */
@media (min-width: 1200px) and (hover: none), (min-width: 1200px) and (pointer: coarse) {
	.gpg-medios-widget .gpg-medios__detail.is-open .gpg-medios__detail-media {
		animation-name: gpg-medios-entra-imagen-centrada;
	}
}

/* --------------------------------------------------------------- Sin JavaScript */

.gpg-medios-widget:not(.gpg-medios--js) .gpg-medios__detail[hidden] {
	display: flex;
	opacity: 1;
	transform: none;
	margin-top: 1px;
}

.gpg-medios-widget:not(.gpg-medios--js) .gpg-medios__back {
	display: none;
}

/* ------------------------------------------------------------------ Tableta */

@media (max-width: 1199px) {
	.gpg-medios-widget {
		--gpg-height: auto;
		--gpg-fila: clamp(260px, 30vw, 340px);
	}

	.gpg-medios-widget .gpg-medios__detail {
		min-height: 0;
	}
}

/* --------------------------------------------------- Vista ampliada apilada */

/**
 * La composición superpuesta (nombre de fondo + imagen encima) necesita ancho
 * para respirar, así que por debajo de escritorio se apila: imagen arriba,
 * texto abajo y el nombre de fondo como textura tenue.
 */
@media (max-width: 1199px) {
	.gpg-medios-widget .gpg-medios__detail {
		display: block;
		padding: clamp(20px, 5vw, 34px);
		padding-top: 78px;
	}

	.gpg-medios-widget .gpg-medios__glow {
		background:
			radial-gradient(
				ellipse 62% 34% at 50% 30%,
				rgba(255, 255, 255, 0.36),
				rgba(255, 255, 255, 0.11) 45%,
				rgba(255, 255, 255, 0) 70%
			),
			radial-gradient(
				ellipse 110% 100% at 50% 34%,
				rgba(0, 0, 0, 0) 36%,
				rgba(0, 0, 0, 0.4) 100%
			);
	}

	.gpg-medios-widget .gpg-medios__watermark {
		top: auto;
		bottom: -0.24em;
		padding-left: 0;
		font-size: 26vw;
		line-height: 0.82;
		transform: none;
	}

	.gpg-medios-widget .gpg-medios__watermark-1 {
		color: rgba(255, 255, 255, 0.16);
	}

	.gpg-medios-widget .gpg-medios__watermark-2 {
		color: rgba(255, 255, 255, 0.1);
	}

	.gpg-medios-widget .gpg-medios__detail-media {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		margin: 0 0 26px;
		transform: none;
	}

	.gpg-medios-widget .gpg-medios__detail-media .gpg-medios__img {
		height: auto;
	}

	.gpg-medios-widget .gpg-medios__detail-media .gpg-medios__img {
		max-height: 34vh;
	}

	.gpg-medios-widget .gpg-medios__detail-copy {
		width: 100%;
	}

	.gpg-medios-widget .gpg-medios__desc {
		max-width: 46ch;
	}
}

/* ------------------------------------------------------------------- Celular */

@media (max-width: 767px) {
	.gpg-medios-widget {
		--gpg-radius: 10px;
		--gpg-fila: clamp(220px, 48vw, 290px);
	}

	.gpg-medios-widget .gpg-medios__item {
		min-width: 45%;
	}

	.gpg-medios-widget .gpg-medios__card {
		padding: 14px;
		gap: 10px;
	}

	.gpg-medios-widget .gpg-medios__name {
		min-height: 0;
		font-size: 15px;
	}

	.gpg-medios-widget .gpg-medios__cue {
		margin-top: 8px;
		font-size: 10px;
		letter-spacing: 0.08em;
	}

	.gpg-medios-widget .gpg-medios__button {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------- Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
	.gpg-medios-widget *,
	.gpg-medios-widget *::before,
	.gpg-medios-widget *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.gpg-medios-widget .gpg-medios__item.is-auto .gpg-medios__img,
	.gpg-medios-widget .gpg-medios__grid.is-hidden,
	.gpg-medios-widget .gpg-medios__detail {
		transform: none !important;
	}
}

/* ----------------------------------------------------------------- Aviso admin */

.gpg-medios-aviso {
	padding: 16px 20px;
	border-left: 3px solid #004e5a;
	background: #e6e7eb;
	color: #181b1f;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
}