/* ==========================================================================
   MÁSVILLA — Piezas comunes de las páginas interiores
   1. Cabecera con foto (Conócenos, Servicios, Biblioteca): 748px en Figma
   2. "Ver más / Ver menos" (texto que se despliega en el sitio)
   ========================================================================== */

/* ---------- 1. Cabecera con foto ---------- */
.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(440px, 64svh, 576px);
	padding-block: clamp(120px, 12vw, 160px) clamp(56px, 5vw, 76px);
	overflow: hidden;
	color: var(--c-crema);
	background: var(--c-negro);
}

.page-hero__media,
.page-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.page-hero__media img { object-fit: cover; }
.page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(35, 35, 35, .45) 0%, rgba(35, 35, 35, .12) 55%, rgba(35, 35, 35, 0) 100%);
}

.page-hero__contenido { position: relative; }
.page-hero__kicker { margin-bottom: 10px; color: var(--c-crema); }
.page-hero__titulo { max-width: 997px; color: var(--c-crema); }
.page-hero__texto {
	max-width: 460px;
	margin-top: 14px;
	font-family: var(--f-raleway);
	font-size: clamp(17px, 1rem + .3vw, 20px);
	line-height: 1.5;
	letter-spacing: .02em;
}

@media (max-width: 767px) {
	.page-hero__media::after {
		background: linear-gradient(0deg, rgba(35, 35, 35, .55) 0%, rgba(35, 35, 35, .15) 65%, rgba(35, 35, 35, 0) 100%);
	}
}

/* ---------- 2. Ver más / Ver menos ---------- */
.mv-leer { --lh: 1.625em; }

.mv-leer__contenido {
	max-height: calc(var(--lineas, 5) * var(--lh));
	overflow: hidden;
	transition: max-height .5s var(--ease);
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.mv-leer__contenido > * + * { margin-top: .8em; }

.mv-leer.is-abierto .mv-leer__contenido,
.mv-leer.is-corto .mv-leer__contenido {
	-webkit-mask-image: none;
	mask-image: none;
}
.mv-leer.is-corto .mv-leer__contenido { max-height: none; }
.mv-leer.is-corto .mv-leer__boton { display: none; }

.mv-leer__boton {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding: 6px 0;
	font-family: var(--f-raleway);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: inherit;
	cursor: pointer;
	transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mv-leer__boton:hover,
.mv-leer__boton:focus-visible { gap: 16px; color: var(--c-naranja); }
.mv-leer__boton svg { transition: transform .35s var(--ease); }
.mv-leer.is-abierto .mv-leer__boton svg { transform: rotate(180deg); }

/* Sin JS: todo el texto visible */
.no-js .mv-leer__contenido { max-height: none; -webkit-mask-image: none; mask-image: none; }
.no-js .mv-leer__boton { display: none; }