/* =========================================================================
   css/porque2026.css - "Por que elegir Staregister" 2026
   (porque-elegir-staregister.php). Lo comun (dos columnas, titulos, columna
   derecha, texto gris de fondo) esta en css/landing2026.css y
   css/certificacion2026.css; aqui las tarjetas de motivos y lo de debajo.
   ========================================================================= */

/* El texto gris "STAREGISTER" no es tan ancho: a su tamano (como en quienes_somos.php) */
.porque26 .porque26-fondo {
	height: 120px;
	background-position: left top;
	background-size: auto 100%;
	opacity: .4;
}

@media (max-width: 1000px) {
	.porque26 .porque26-fondo { height: 70px; }
}

.porque26 .cert26-titulo,
.porque26 .cert26-denominacion {
	text-transform: none;
}

/* ---------- Motivos: tarjetas numeradas, 2 por fila ---------- */
.porque26-motivos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 10px 0 35px;
}

.porque26-motivo {
	display: flex;
	gap: 16px;
	padding: 22px;
	border: 1px solid #e6e9ee;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(35, 45, 59, .06);
	transition: box-shadow .2s ease, transform .2s ease;
}

.porque26-motivo:hover {
	box-shadow: 0 8px 24px rgba(35, 45, 59, .12);
	transform: translateY(-2px);
}

/* Numero en el cuadrado amarillo de .lista_numerica */
.porque26-numero {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: .5rem;
	background-color: #f4b333;
	color: #fff;
	font-family: var(--fuente-titulos);
	font-size: 1.25rem;
	letter-spacing: .5px;
}

.porque26-motivo-texto {
	min-width: 0;
}

.landing26-contenido .porque26-motivo-titulo {
	margin: 2px 0 8px;
	padding: 0;
	background: none;
	color: #333f4f;
	font-family: var(--fuente-titulos);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.3;
}

.landing26-contenido .porque26-motivo-texto p {
	margin: 0;
	color: #5b6573;
	font-size: .92rem;
	line-height: 1.6;
	text-align: left !important;
}

/* ---------- Imagen y parrafo final ---------- */
.porque26-resto img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 25px;
	border-radius: 1rem;
}

.porque26-resto .caja_imagen_fit {
	position: static !important;
	height: auto;
	overflow: visible;
}

.porque26-resto strong {
	color: #333f4f;
}

@media (prefers-reduced-motion: reduce) {
	.porque26-motivo { transition: none; }
	.porque26-motivo:hover { transform: none; }
}

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