/* Medicina Regenerativa — hero de revelado por cursor.
   Composición: el sujeto ocupa el centro-izquierda de las dos fotos y el
   tercio derecho es negro; el bloque de marca y el título viven en ese negro,
   no encima del cuerpo. */

/* Sin @property el radio de la máscara no puede animarse por CSS: el navegador
   trata --r como texto. Registrarlo como <length> es lo que permite el
   crecimiento suave al entrar y salir del hero. */
@property --r {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

.regenerative-hero {
	/* Beige tomado del propio isotipo (color dominante de p7 1.png). */
	--p7-beige: #B8A890;

	position: relative;
	/* El hero vive dentro de .flow, que está centrado y limita el ancho; estos
	   márgenes negativos lo sacan del contenedor para que ocupe la pantalla. */
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	min-height: clamp(560px, 92vh, 940px);
	overflow: hidden;
	background: #000;
	isolation: isolate;
}

/* El encuadre se ancla muy arriba (12%, no el 50% por defecto): en pantallas
   anchas "cover" recorta en vertical y ese recorte se comia la cabeza. Con un
   valor bajo casi todo el sobrante se descuenta por abajo y el rostro entra
   completo, que es lo que sostiene la imagen. */
.regenerative-hero__layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 35% 12%;
	background-repeat: no-repeat;
}

.regenerative-hero__base {
	z-index: 1;
}

/* La capa regenerada se descubre con una máscara suave que sigue al cursor.
   El degradado (en vez de clip-path) es lo que evita el borde de círculo duro. */
.regenerative-hero__reveal {
	z-index: 2;
	--x: 50%;
	--y: 50%;
	--r: 0px;
	-webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0, 0, 0, 0.92) 38%, rgba(0, 0, 0, 0.45) 66%, transparent 100%);
	mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0, 0, 0, 0.92) 38%, rgba(0, 0, 0, 0.45) 66%, transparent 100%);
	transition: --r 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Halo cálido que acompaña al revelado. */
.regenerative-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity 500ms ease;
	background: radial-gradient(circle var(--glow-r, 320px) at var(--gx, 50%) var(--gy, 50%), rgba(184, 168, 144, 0.20) 0%, rgba(184, 168, 144, 0.06) 45%, transparent 72%);
	mix-blend-mode: screen;
}

.regenerative-hero.is-active .regenerative-hero__glow {
	opacity: 1;
}

.regenerative-hero__particles {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	overflow: hidden;
}

.p7-spark {
	position: absolute;
	width: var(--size, 4px);
	height: var(--size, 4px);
	border-radius: 50%;
	background: var(--p7-beige);
	box-shadow: 0 0 calc(var(--size, 4px) * 3) rgba(184, 168, 144, 0.9);
	opacity: 0;
	animation: p7-spark var(--life, 1600ms) ease-out forwards;
}

@keyframes p7-spark {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scale(0.4);
	}
	18% {
		opacity: 1;
		transform: translate3d(calc(var(--tx) * 0.18), calc(var(--ty) * 0.18), 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate3d(var(--tx), var(--ty), 0) scale(0.2);
	}
}

/* Velo que oscurece el lado derecho para que el título tenga contraste real. */
.regenerative-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.55) 68%, rgba(0, 0, 0, 0.85) 100%);
}

/* ── Bloque de marca y título, en el negro del tercio derecho ── */
.regenerative-hero__content {
	position: absolute;
	z-index: 6;
	right: clamp(24px, 6vw, 88px);
	top: 50%;
	transform: translateY(-50%);
	/* El bloque se ajusta al título (fit-content) para que el subtítulo pueda
	   justificarse exactamente contra sus dos bordes.

	   El tope ya NO se mide en `ch`. Lo hacía —min(52ch, 44vw)— y esa cifra
	   caía justo sobre el ancho de "REGENERATIVA": una palabra de doce letras
	   no se puede partir, así que en cuanto la métrica variaba un punto (otra
	   caché de fuente, otro ancho de barra de desplazamiento) la palabra
	   rebasaba el bloque y se salía por el borde derecho de la pantalla. El
	   `ch` además no mide la tipografía del título, sino la del párrafo que
	   hereda el bloque, así que ni siquiera describía lo que estaba limitando.
	   Ahora el tope es geométrico: la mitad del ancho de pantalla, y nunca más
	   que la pantalla menos sus dos márgenes. El tamaño del título (ver
	   .regenerative-hero__title) se elige para que la palabra larga entre en
	   ese tope con holgura. */
	width: fit-content;
	max-width: min(58vw, calc(100vw - 2 * clamp(24px, 6vw, 88px)));
	margin-left: auto;
	text-align: right;
	pointer-events: none;
}

/* El isotipo encabeza el bloque: leerlo junto al título le da peso de marca,
   que es lo que no lograba flotando suelto en una esquina. */
.regenerative-hero__isotipo {
	display: block;
	width: clamp(92px, 9.5vw, 176px);
	height: auto;
	margin: 0 0 clamp(18px, 2vw, 30px) auto;
	animation: p7-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.regenerative-hero__title {
	font-family: var(--font-display, Butler, serif);
	/* Más grande, a pedido del propietario: el tope pasa de 6.4rem a 9rem y el
	   término fluido de 6.6vw a 7.2vw, así que en una pantalla de 1900 px el
	   título sube de 102 a 137 px.
	   El 7,2vw no es arbitrario. MEDIDO con un Range sobre el texto real —no
	   sobre la caja del span, que es de bloque y miente—, "REGENERATIVA" ocupa
	   0,5815 em por letra en Butler versales con su tracking: 12 × 0,5815 ×
	   7,2vw = 50,2vw, que entra en el tope de 58vw del bloque con un 13 % de
	   holgura. Ese margen es el que absorbe las diferencias de métrica entre
	   navegadores; con el 44vw y el 6,6vw de antes la palabra caía justo sobre
	   el tope y cualquier variación la sacaba por el borde derecho.
	   Si algún día cambia la tipografía del título, hay que volver a medir
	   antes de tocar este número. */
	font-size: clamp(2.8rem, 7.2vw, 9rem);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #F7F5F0;
	margin: 0;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.75);
	animation: p7-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
}

.regenerative-hero__title span {
	display: block;
}

.regenerative-hero__subtitle {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.95rem, 1.25vw, 1.15rem);
	font-weight: 300;
	line-height: 1.6;
	color: rgba(247, 245, 240, 0.74);
	margin: clamp(18px, 2vw, 28px) 0 0;
	letter-spacing: 0.14em;
	/* width:0 + min-width:100% deja que el ancho del bloque lo fije el título:
	   así el párrafo no lo ensancha y queda justificado contra sus bordes. */
	width: 0;
	min-width: 100%;
	text-align: justify;
	text-align-last: right;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
	animation: p7-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
}

@keyframes p7-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Tablet: el negro de la derecha ya no alcanza; el bloque baja ── */
@media (max-width: 900px) {
	.regenerative-hero {
		min-height: clamp(400px, 68vh, 580px);
	}

	.regenerative-hero__layer {
		background-position: 42% center;
	}

	.regenerative-hero__scrim {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 30%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.9) 100%);
	}

	.regenerative-hero__content {
		right: auto;
		left: clamp(20px, 6vw, 40px);
		width: fit-content;
		margin-left: 0;
		max-width: min(34ch, calc(100% - 2 * clamp(20px, 6vw, 40px)));
		top: auto;
		bottom: clamp(28px, 6vw, 52px);
		transform: none;
		text-align: left;
	}

	.regenerative-hero__isotipo {
		margin-left: 0;
		margin-right: auto;
	}

	.regenerative-hero__subtitle {
		text-align-last: left;
	}
}

@media (max-width: 520px) {
	.regenerative-hero__title {
		font-size: clamp(2rem, 9vw, 2.9rem);
	}
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
	.regenerative-hero__reveal {
		transition: none;
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 0.55;
	}

	.p7-spark {
		display: none;
	}

	.regenerative-hero__isotipo,
	.regenerative-hero__title,
	.regenerative-hero__subtitle {
		animation: none;
		opacity: 1;
		transform: none;
	}
}