/**
 * Widget "CUME Accesos".
 *
 * Tarjetas con imagen que llevan a otro sitio. La tarjeta entera es el enlace,
 * así que el realce al pasar el ratón se aplica desde ella y no hace falta JS.
 */

.cume-acc {
	--cume-acc-cols: 3;
	--cume-acc-gap: 24px;
	--cume-acc-radius: 14px;

	--cume-acc-card-bg: var(--cume-surface, #ffffff);
	--cume-acc-card-border: var(--cume-border, #e6e6ec);
	--cume-acc-overlay: rgba(20, 16, 40, 0.35);

	--cume-acc-flecha-bg: #ffa800;
	--cume-acc-flecha-color: #1a1636;

	--cume-acc-acento-1: #ffa800;
	--cume-acc-acento-2: #7b6cf6;

	--cume-acc-transicion: 320ms;

	display: grid;
	grid-template-columns: repeat( var(--cume-acc-cols), minmax(0, 1fr) );
	gap: var(--cume-acc-gap);
}

/* Cualificado con la etiqueta: el tema subraya y colorea todos los enlaces, y
 * aquí el enlace es la tarjeta entera. */
.cume-acc a.cume-acc__card,
.cume-acc div.cume-acc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cume-acc-card-bg);
	border: 1px solid var(--cume-acc-card-border);
	border-radius: var(--cume-acc-radius);
	color: inherit;
	text-decoration: none;
	transition: transform var(--cume-acc-transicion) ease, box-shadow var(--cume-acc-transicion) ease;
}

.cume-acc-sombra-yes .cume-acc__card {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.cume-acc a.cume-acc__card:hover,
.cume-acc a.cume-acc__card:focus-visible {
	transform: translateY( -6px );
}

.cume-acc-sombra-yes a.cume-acc__card:hover,
.cume-acc-sombra-yes a.cume-acc__card:focus-visible {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

/* --- Imagen --- */
/* La caja no impone alto: lo pone la imagen con su tamaño natural.
 *
 * Antes se recortaba a una proporción fija, primero con `aspect-ratio` y luego
 * con relleno porcentual. Las dos formas obligan al navegador a deducir el alto
 * de la caja, y en WebKit ese cálculo fallaba: las tarjetas quedaban en cero,
 * nunca entraban en pantalla, la imagen diferida no se cargaba y por tanto
 * nunca recuperaban su tamaño. Sin nada que deducir, no hay nada que falle. */
.cume-acc__media {
	position: relative;
	overflow: hidden;
	background: #14121f;
}

/* Cualificado con la etiqueta porque `.elementor img { height: auto }` ganaría
 * a una regla de una sola clase. */
.cume-acc .cume-acc__media img.cume-acc__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	transition: transform var(--cume-acc-transicion) ease;
}

.cume-acc-zoom-yes a.cume-acc__card:hover .cume-acc__img,
.cume-acc-zoom-yes a.cume-acc__card:focus-visible .cume-acc__img {
	transform: scale( 1.06 );
}

.cume-acc__velo {
	position: absolute;
	inset: 0;
	background: var(--cume-acc-overlay);
	pointer-events: none;
}

/* Con el texto encima, un degradado desde abajo asegura que se lea sobre
 * cualquier foto sin oscurecer la imagen entera. */
.cume-acc-texto-encima .cume-acc__velo {
	background: linear-gradient( to top, var(--cume-acc-overlay) 0%, var(--cume-acc-overlay) 25%, transparent 85% );
}

/* --- Acabados ---
 * La barra y el marco se pintan con pseudo-elementos sobre la tarjeta: así no
 * hace falta marcado extra y no afectan al cálculo del tamaño. */
.cume-acc-estilo-barra .cume-acc__card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	height: 5px;
	background: linear-gradient( to right, var(--cume-acc-acento-1) 0%, var(--cume-acc-acento-1) 28%, var(--cume-acc-acento-2) 28%, var(--cume-acc-acento-2) 100% );
}

.cume-acc-estilo-marco .cume-acc__card {
	border-color: transparent;
	/* Dos fondos: el propio de la tarjeta recortado a su caja y el degradado
	 * recortado al borde. Es la forma de tener un borde con degradado sin
	 * envolver la tarjeta en otro elemento. */
	background-image: linear-gradient( var(--cume-acc-card-bg), var(--cume-acc-card-bg) ), linear-gradient( 135deg, var(--cume-acc-acento-1), var(--cume-acc-acento-2) );
	background-origin: border-box;
	background-clip: padding-box, border-box;
	border-width: 2px;
}

/* --- Acción --- */
.cume-acc__accion {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 14px;
	background: var(--cume-acc-flecha-bg);
	border-radius: 999px;
	color: var(--cume-acc-flecha-color);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	opacity: 0;
	transform: translate( 6px, -6px );
	transition: opacity var(--cume-acc-transicion) ease, transform var(--cume-acc-transicion) ease;
}

/* Sin etiqueta el conjunto se reduce a un círculo. */
.cume-acc__accion:not( :has( .cume-acc__accion-texto ) ) {
	padding: 6px;
}

.cume-acc__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	font-size: 1rem;
}

.cume-acc a.cume-acc__card:hover .cume-acc__accion,
.cume-acc a.cume-acc__card:focus-visible .cume-acc__accion {
	opacity: 1;
	transform: translate( 0, 0 );
}

/* --- Textos --- */
.cume-acc__body {
	padding: 22px 24px;
}

.cume-acc-texto-encima .cume-acc__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}

.cume-acc__title {
	margin: 0;
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
}

.cume-acc__text {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Debajo de la imagen el fondo es claro, así que el blanco no sirve: heredan
 * los colores de texto del tema salvo que se les asigne uno. */
.cume-acc-texto-debajo .cume-acc__title {
	color: var(--cume-text, #2c2c3a);
}

.cume-acc-texto-debajo .cume-acc__text {
	color: var(--cume-text-muted, #5b5b6e);
}

/* --- Responsive --- */
@media (max-width: 767px) {
	.cume-acc {
		--cume-acc-cols: 1;
	}
}

/* La flecha aparece siempre en táctil: ahí no hay «pasar el ratón» y, si no,
 * nunca se vería. */
@media (hover: none) {
	.cume-acc__accion {
		opacity: 1;
		transform: translate( 0, 0 );
	}
}

@media (prefers-reduced-motion: reduce) {
	.cume-acc a.cume-acc__card,
	.cume-acc__img,
	.cume-acc__accion {
		transition: none;
	}

	.cume-acc a.cume-acc__card:hover,
	.cume-acc a.cume-acc__card:focus-visible {
		transform: none;
	}

	.cume-acc-zoom-yes a.cume-acc__card:hover .cume-acc__img {
		transform: none;
	}
}