/* =========================================================================
   css/servicios2026.css - Tarjetas "Certificacion de sistemas / competencia
   profesional / formacion especializada" 2026 de la web principal
   (partials/servicios2026.php). Todo bajo .servicios26.
   En agencias son .home_sub_1/2/3 (principal.css: la imagen de fondo) con el
   texto colocado a mano. Aqui la imagen va en un <img> (905x678) y el texto
   se coloca en porcentajes sobre su parte transparente de abajo, a la
   derecha del icono; el tamano de letra va en cqw para que escale con la tarjeta.
   ========================================================================= */

.servicios26 {
	clear: both;
	padding: 40px 24px 10px;
	background-color: #fff;
	font-family: var(--fuente-texto);
	text-align: left;
}

.servicios26 *,
.servicios26 *::before,
.servicios26 *::after {
	box-sizing: border-box;
}

.servicios26-tarjetas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2%;
	max-width: 85%;
	margin: 0 auto;
}

.servicios26 .servicios26-tarjeta {
	position: relative;
	display: block;
	container-type: inline-size;
	text-decoration: none !important;
}

.servicios26-tarjeta img {
	display: block;
	width: 100%;
	height: auto;
	transition: filter .3s ease;
}

.servicios26-tarjeta:hover img,
.servicios26-tarjeta:focus-visible img {
	filter: brightness(1.08);
}

.servicios26-tarjeta:focus-visible {
	outline: 3px solid #f4b333;
	outline-offset: 3px;
}

/* Texto a la derecha del icono, centrado en vertical entre el final de la foto (fila 545 de
   678 de las imagenes: 80.4%) y el final del cuadrado del icono (fila 676: 0.3% desde abajo) */
.servicios26-texto {
	position: absolute;
	top: 80.4%;
	bottom: 0.3%;
	left: 30%;
	right: 2%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 22px;
	font-size: 4.3cqw;
	font-weight: 300;
	line-height: 1.5;
	text-transform: uppercase;
}

/* El color del CSS antiguo para <strong> no vale aqui: el de la tarjeta */
.servicios26 .servicios26-texto strong {
	display: block;
	color: inherit;
	font-weight: 700;
	line-height: 1.2;
}

.servicios26-azul .servicios26-texto     { color: #333f4f; }
.servicios26-amarillo .servicios26-texto { color: #f4b333; }
.servicios26-gris .servicios26-texto     { color: #a7a9ac; }

/* ---------- Tablet y movil ---------- */
@media (max-width: 991px) {
	.servicios26 {
		padding: 32px 16px 0;
	}

	.servicios26-tarjetas {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.servicios26-tarjetas {
		grid-template-columns: 1fr;
		row-gap: 24px;
		max-width: 520px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.servicios26-tarjeta img {
		transition: none;
	}
}