/* ═══════════════════════════════════════════════════════════════════
   BLOQUE 5 v2 «Para tu negocio» · dos tarjetas de foto
   Cada tarjeta es toda imagen (1:1) con título y botón abajo a la izquierda.

   - Imagen a sangre, degradado y título: comunes, en foto.css
     (.foto, .foto--dark, .foto__txt, .foto__big). Aquí solo lo propio del bloque,
     con prefijo pn. Las dos columnas las pone .g2 de styles.css.
   - Toda la tarjeta es clicable: el ::after del botón la cubre entera.
   - Se carga después de styles.css y foto.css, solo desde index-v2.html.
   ═══════════════════════════════════════════════════════════════════ */

.pn {
	--foto-size:clamp(26px,2.4vw,44px);
	aspect-ratio:1/1;
	border-radius:25px;
	background:var(--navy);
	isolation:isolate;   /* Safari: que el radio recorte la imagen también durante el zoom */
}
.pn__txt {
	padding:0 clamp(20px,3vw,48px) clamp(20px,3vw,48px);
}

/* el enlace es el botón, pero su ::after se extiende a toda la tarjeta */
.pn__btn::after {
	content:"";
	position:absolute;
	inset:0;
}

/* zoom suave de la imagen al pasar el ratón o con el foco en el botón */
.pn > img {
	transition:transform .5s ease;
}
.pn:hover > img,
.pn:focus-within > img {
	transform:scale(1.04);
}
@media (prefers-reduced-motion:reduce) {
	.pn:hover > img,
	.pn:focus-within > img {
		transform:none;
	}
}