.ph-hero {
	--ph-red: #b0201f;
	--ph-red-dark: #841818;
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
}

.ph-hero__picture {
	display: block;
	width: 100%;
}

.ph-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

/* El ancho, alto y tamaño de letra de abajo son los valores por
   defecto ("automático"), pensados para adaptarse solos a la pantalla.
   Si en Ajustes → Pedido Hero se rellena un ancho, alto o tamaño de
   letra fijo, esos valores llegan como estilo en línea en el propio
   botón y tienen prioridad sobre este clamp(). */
.ph-hero__button {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--ph-red);
	color: #fff;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(22px, 4.6vw, 36px);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	border: 3px solid #ffffff;
	border-radius: 999px;
	padding: clamp(20px, 4.2vw, 32px) clamp(40px, 9vw, 80px);
	box-shadow: 0 14px 34px rgba(176, 32, 31, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.22);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.ph-hero__button:hover,
.ph-hero__button:focus-visible {
	background: var(--ph-red-dark);
	color: #fff;
}

.ph-hero__button:active {
	transform: translateX(-50%) scale(0.97);
}

/* ---------- Posición del botón sobre la imagen ---------- */

.ph-hero--bottom .ph-hero__button {
	bottom: 6%;
}

.ph-hero--center .ph-hero__button {
	top: 50%;
	transform: translate(-50%, -50%);
}

.ph-hero--center .ph-hero__button:active {
	transform: translate(-50%, -50%) scale(0.97);
}

.ph-hero--top .ph-hero__button {
	top: 6%;
}

/* En pantallas muy pequeñas, un poco más de aire respecto a los bordes */
@media (max-width: 480px) {
	.ph-hero--bottom .ph-hero__button {
		bottom: 5%;
	}

	.ph-hero--top .ph-hero__button {
		top: 5%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-hero__button {
		transition: none;
	}
}