/* ═══════════════════════════════════════════════════════════════════
   FOTO CON TÍTULO v2 · piezas comunes
   Imagen a sangre con un degradado oscuro encima y título blanco.
   La usan «Con deco…» (beneficios.css) y «Para tu negocio» (negocio.css).

   - Prefijo foto / foto__ (ojo: .ft es el footer en styles.css).
   - Se carga después de styles.css, solo desde index-v2.html.
   ═══════════════════════════════════════════════════════════════════ */

/* ── contenedor: imagen a sangre y degradado (::before) ──
   Degradados (oscuro #101012):
   - por defecto: desde abajo, suave (solo oscurece un poco)
   - .foto--left:   desde la izquierda, como las diapositivas con foto del hero
   - .foto--dark:   desde abajo, intermedio (para títulos sobre fotos claras) */
.foto {
	--foto-bottom:linear-gradient(0deg,rgba(16,16,18,.4) 0%,rgba(16,16,18,.15) 50%,rgba(16,16,18,0) 85%);
	--foto-left:linear-gradient(90deg,rgba(16,16,18,.9) 0%,rgba(16,16,18,.62) 32%,rgba(16,16,18,.12) 60%,rgba(16,16,18,0) 100%);
	--foto-dark:linear-gradient(0deg,rgba(16,16,18,.75) 0%,rgba(16,16,18,.45) 40%,rgba(16,16,18,0) 80%);
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:flex-end;
}
.foto > img {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.foto::before {
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	background:var(--foto-bottom);
}
.foto--left::before {
	background:var(--foto-left);
}
.foto--dark::before {
	background:var(--foto-dark);
}

/* ── texto encima: título y botón apilados ──
   Queda sobre el degradado por ser elemento flex con z-index, sin position:
   así no hace de caja de referencia, y el ::after de un enlace que lleve
   dentro puede extenderse a todo el contenedor (tarjeta clicable entera). */
.foto__txt {
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:clamp(16px,1.6vw,28px);
}

/* ── título (formato de .dh__big). Tamaño con --foto-size ── */
.foto__big {
	font-size:var(--foto-size,clamp(28px,3.4vw,64px));
	font-weight:700;
	line-height:1.03;
	letter-spacing:-.01em;
	color:#fff;
	text-wrap:balance;
	text-shadow:0 2px 24px rgba(0,0,0,.4);
}