/**
 * Los bloques de la portada.
 *
 * Solo se carga en la portada: ninguna otra plantilla usa estas reglas y son
 * unas quinientas líneas que no tienen por qué viajar hasta la página del panel.
 *
 * Los colores, los fondos, los redondeos y las alturas llegan como propiedades
 * personalizadas en el atributo style de cada sección. Aquí no hay ningún valor
 * que dependa de los ajustes: solo las reglas y sus valores de reserva.
 */

/* --- Contenedor de sección ----------------------------------------------- */

.orvt-s {
	position: relative;
	/* Crea contexto de apilado propio para que el velo de la imagen no se
	   escape hacia las secciones vecinas. */
	isolation: isolate;
	background: var(--orvt-bg, transparent);
	padding-block: var(--orv-space-9);
	/* La sección reserva la altura de su separador en vez de dejar que este
	   desborde hacia abajo: si desbordara, el fondo de la sección siguiente lo
	   taparía, porque las dos son hermanas y la posterior se pinta después. */
	padding-bottom: calc( var(--orv-space-9) + var(--orvt-divider-h, 0px) );
}

.orvt-s--bg-image {
	background-image: var(--orvt-bg-image);
	background-size: cover;
	background-position: center;
}

/* El velo va en un pseudoelemento y no en un degradado sobre la imagen para que
   la opacidad sea un solo número regulable y no dos paradas de color. */
.orvt-s--bg-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #000;
	opacity: var(--orvt-veil, 0.35);
}

/* Sin esto el velo taparía el texto: un elemento posicionado con z-index 0 se
   pinta por encima del contenido que no está posicionado.
   El separador NO entra aquí. Lo estuvo, y `position: relative` con dos clases
   de especificidad ganaba al `position: absolute` de una sola: el separador
   caía al flujo normal, se pintaba donde acababa el contenido y dejaba debajo
   todo el relleno que la sección le había reservado. Su z-index va en su
   propia regla, que ya lo posiciona. */
.orvt-s > .orvt-container {
	position: relative;
	z-index: 1;
}

/* --- Color del texto sobre fondos oscuros -------------------------------- */

.orvt-s--ink-light {
	color: #fff;
}

.orvt-s--ink-dark {
	color: var(--orv-ink);
}

.orvt-s--ink-light .orvt-s__title,
.orvt-s--ink-light .orvt-s__subtitle,
.orvt-s--ink-light .orvt-prose,
.orvt-s--ink-light .orvt-place,
.orvt-s--ink-light .orvt-stats__value,
.orvt-s--ink-light .orvt-stats__label,
.orvt-s--ink-light .orvt-facts,
.orvt-s--ink-light .orvt-facts--muted,
.orvt-s--ink-light .orvt-faq__q,
.orvt-s--ink-light .orvt-faq__chevron {
	color: inherit;
}

.orvt-s--ink-light .orvt-s__subtitle,
.orvt-s--ink-light .orvt-stats__label,
.orvt-s--ink-light .orvt-facts--muted {
	opacity: 0.82;
}

.orvt-s--ink-light .orvt-btn--outline,
.orvt-s--ink-light .orvt-btn--text {
	--orvt-btn-color: #fff;
}

.orvt-s--ink-light .orvt-btn--outline:hover {
	background: rgba(255, 255, 255, 0.14);
}

.orvt-s--ink-light .orvt-faq,
.orvt-s--ink-light .orvt-faq__item {
	border-color: rgba(255, 255, 255, 0.22);
}

/* --- Separadores ---------------------------------------------------------- */

.orvt-divider {
	position: absolute;
	left: 0;
	right: 0;
	/* Un píxel por debajo del borde, además de la unidad que desborda el
	   trazado: con los dos, el solape siempre gana a cualquier redondeo. */
	bottom: -1px;
	height: calc( var(--orvt-divider-h, 60px) + 1px );
	z-index: 1;
	color: var(--orvt-divider-color, transparent);
	pointer-events: none;
}

.orvt-divider svg {
	/* display:block mata el hueco de línea base que deja un SVG en línea, que
	   es la otra costura habitual de este recurso. */
	display: block;
	width: 100%;
	height: 100%;
}

/* El giro horizontal es un espejo puro: reflejar de izquierda a derecha no
   mueve nada en vertical, así que el relleno sigue pegado al borde de abajo. El
   vertical no se hace aquí —volcaría la caja entera y despegaría el separador—
   sino con una silueta invertida, en inc/dividers.php. */
.orvt-divider--mirror svg {
	transform: scaleX(-1);
}

/* La línea recta usa la misma pieza, pero su «altura» es el grosor de la regla
   y ahí el control llega hasta 160: una raya de 160 píxeles no es una raya, es
   una franja. Se limita a 8 para que la opción haga lo que su nombre dice. */
.orvt-divider--line {
	height: min( var(--orvt-divider-h, 1px), 8px );
	bottom: 0;
}

/* --- Cabecera de sección -------------------------------------------------- */

.orvt-s__head {
	max-width: 44em;
	margin: 0 auto var(--orv-space-7);
	text-align: center;
}

.orvt-s__eyebrow {
	margin: 0 0 var(--orv-space-3);
	font-size: var(--orv-text-sm);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-wide);
	text-transform: uppercase;
	color: var(--orv-accent);
}

.orvt-s__title {
	margin: 0 0 var(--orv-space-4);
	font-size: clamp(1.875rem, 4vw, var(--orv-text-2xl));
	font-weight: var(--orv-weight-semibold);
	line-height: var(--orv-leading-snug);
	letter-spacing: var(--orv-tracking-tight);
	color: var(--orv-ink);
	text-wrap: balance;
}

.orvt-s__subtitle {
	margin: 0;
	font-size: clamp(1.0625rem, 2vw, var(--orv-text-lg));
	line-height: var(--orv-leading-normal);
	color: var(--orv-ink-muted);
	text-wrap: pretty;
}

/* --- Imágenes de contenido ------------------------------------------------ */

.orvt-media {
	margin: 0;
	border-radius: var(--orvt-img-radius, 20px);
	overflow: hidden;
	box-shadow: var(--orvt-img-shadow, var(--orv-shadow));
}

.orvt-media__img {
	width: 100%;
	aspect-ratio: var(--orvt-img-ratio, 4 / 3);
	object-fit: cover;
}

/* Con la proporción original la imagen manda, así que no se recorta nada. */
.orvt-media--auto .orvt-media__img {
	aspect-ratio: auto;
	object-fit: contain;
}

/* --- Presentación --------------------------------------------------------- */

.orvt-hero {
	display: grid;
	gap: var(--orv-space-8);
	align-items: center;
}

.orvt-hero--center {
	justify-items: center;
}

.orvt-hero--right,
.orvt-hero--left {
	grid-template-columns: 1fr 1fr;
}

/* La imagen va antes que el texto en el HTML solo cuando toca verla antes;
   el resto del tiempo el orden visual se resuelve aquí y el lector de pantalla
   sigue oyendo primero el titular. */
.orvt-hero--left .orvt-hero__text {
	order: 2;
}

.orvt-hero--right .orvt-s__head,
.orvt-hero--left .orvt-s__head {
	margin-inline: 0;
	text-align: left;
}

.orvt-hero .orvt-s__title {
	/* Escala fluida: llena la pantalla en un portátil sin desbordarse en un
	   móvil, y sin saltos bruscos entre tamaños. */
	font-size: clamp(2.25rem, 6vw, var(--orv-text-3xl));
	line-height: var(--orv-leading-tight);
	letter-spacing: var(--orv-tracking-tighter);
}

.orvt-hero--center .orvt-actions {
	justify-content: center;
}

.orvt-hero--center .orvt-media {
	margin-top: var(--orv-space-4);
}

/* --- Presentación a media sección ----------------------------------------
   La foto llena la mitad de borde a borde y de arriba abajo. La sección pierde
   su relleno vertical (`orvt-s--bleed`, que pone orvt_section_attrs) y la
   rejilla ocupa el ancho entero, sin contenedor.

   El texto se alinea solo con el resto de la página: el relleno lateral es el
   del contenedor cuando la ventana es más ancha que él, y el del borde cuando
   no. Sin ese `max()` el titular se pegaría al borde en una pantalla grande y
   dejaría de cuadrar con las secciones de debajo. */

.orvt-s--bleed {
	padding-block: 0;
}

.orvt-hero--split-right,
.orvt-hero--split-left {
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

.orvt-s--bleed-tall .orvt-hero {
	min-height: min(70vh, 44rem);
}

.orvt-s--bleed-full .orvt-hero {
	min-height: 100vh;
}

.orvt-hero--split-right .orvt-hero__text,
.orvt-hero--split-left .orvt-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--orv-space-9);
}

.orvt-hero--split-right .orvt-hero__text {
	padding-inline-start: max(var(--orv-space-5), calc((100vw - var(--orv-container)) / 2));
	padding-inline-end: var(--orv-space-7);
}

.orvt-hero--split-left .orvt-hero__text {
	order: 2;
	padding-inline-end: max(var(--orv-space-5), calc((100vw - var(--orv-container)) / 2));
	padding-inline-start: var(--orv-space-7);
}

.orvt-hero--split-right .orvt-s__head,
.orvt-hero--split-left .orvt-s__head {
	margin-inline: 0;
	text-align: left;
}

/* La foto: sin recuadro, sin redondeo y sin proporción fija. El alto lo manda
   la sección y el recorte lo hace object-fit, que es lo que evita que una foto
   vertical y una apaisada se comporten distinto. */
.orvt-hero__bleed {
	position: relative;
	min-height: 18rem;
}

.orvt-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Dos columnas: quiénes somos y dónde estamos -------------------------- */

.orvt-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--orv-space-8);
	align-items: center;
}

.orvt-split .orvt-s__head {
	max-width: none;
	margin: 0 0 var(--orv-space-5);
	text-align: left;
}

.orvt-split--right .orvt-media,
.orvt-split--right .orvt-map {
	order: 2;
}

/* Sin imagen ni mapa el bloque es una sola columna centrada, en vez de media
   sección en blanco esperando algo que no se ha subido. Va después de la regla
   genérica a propósito: las dos tienen la misma especificidad y gana la última,
   así que puesta antes no centraría nada. */
.orvt-split--single {
	grid-template-columns: 1fr;
	max-width: var(--orv-container-narrow);
}

.orvt-split--single .orvt-s__head,
.orvt-split--single .orvt-facts,
.orvt-split--single .orvt-prose,
.orvt-split--single .orvt-place {
	text-align: center;
}

.orvt-split--single .orvt-actions {
	justify-content: center;
}

/* --- Datos destacados ----------------------------------------------------- */

.orvt-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--orv-space-5);
	margin: var(--orv-space-6) 0 0;
	padding: 0;
}

.orvt-stats__value {
	margin: 0;
	font-size: var(--orv-text-xl);
	font-weight: var(--orv-weight-semibold);
	letter-spacing: var(--orv-tracking-tight);
	color: var(--orv-ink);
}

.orvt-stats__label {
	/* El margen lateral que el navegador da a <dd> descolocaría la rejilla. */
	margin: 4px 0 0;
	font-size: var(--orv-text-sm);
	line-height: var(--orv-leading-snug);
	color: var(--orv-ink-muted);
	text-wrap: pretty;
}

/* --- Dónde estamos -------------------------------------------------------- */

.orvt-place {
	margin: var(--orv-space-5) 0 0;
	font-weight: var(--orv-weight-medium);
	color: var(--orv-ink);
	white-space: pre-line;
}

.orvt-facts {
	list-style: none;
	margin: var(--orv-space-4) 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: var(--orv-text-base);
	color: var(--orv-ink-soft);
}

.orvt-facts--muted {
	font-size: var(--orv-text-sm);
	color: var(--orv-ink-muted);
}

.orvt-map {
	border-radius: var(--orv-radius-lg);
	overflow: hidden;
}

.orvt-map__frame {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}

/* --- Preguntas frecuentes -------------------------------------------------
 *
 * El acordeón es <details> del navegador. Aquí solo se quita el triángulo que
 * cada motor dibuja a su manera y se pone el nuestro.
 */

.orvt-faq {
	border-top: 1px solid var(--orv-border);
}

.orvt-faq__item {
	border-bottom: 1px solid var(--orv-border);
}

.orvt-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--orv-space-4);
	padding: var(--orv-space-5) 0;
	list-style: none;
	cursor: pointer;
	font-size: var(--orv-text-lg);
	font-weight: var(--orv-weight-medium);
	line-height: var(--orv-leading-snug);
	color: var(--orv-ink);
}

.orvt-faq__q::-webkit-details-marker {
	display: none;
}

.orvt-faq__chevron {
	flex: 0 0 auto;
	color: var(--orv-ink-muted);
	transition: transform var(--orv-duration) var(--orv-ease);
}

.orvt-faq__item[open] .orvt-faq__chevron {
	transform: rotate(180deg);
}

.orvt-faq__a {
	max-width: 62ch;
	padding-bottom: var(--orv-space-5);
}

/* No se anima la altura: sin JavaScript no se puede hacer bien, y una
   transición a medias se nota más que ninguna. Solo entra el contenido. */
.orvt-faq__item[open] .orvt-faq__a {
	animation: orvt-faq-in var(--orv-duration) var(--orv-ease);
}

@keyframes orvt-faq-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.orvt-faq__item[open] .orvt-faq__a {
		animation: none;
	}
}

/* --- La foto de cada clase ------------------------------------------------
 *
 * La tarjeta del horario y su rejilla son del plugin. El theme solo le pasa las
 * medidas: aquí es donde las variables del theme se convierten en las suyas, en
 * una sola regla en vez de repartidas por el atributo style de cada tarjeta.
 */

.orvt-s--classes {
	--orv-card-img: var(--orvt-card-img, 72px);
	--orv-card-img-radius: var(--orvt-card-img-radius, 10px);
}

/* El botón de reservar es del plugin. El respaldo se escribe aquí y no se deja
   al de la regla del plugin: una variable que apunta a otra sin definir acaba
   en un valor inválido, y aunque el navegador acabe cayendo al respaldo, no es
   algo que convenga dejar implícito en la única regla que da color al botón. */
.orvt-s--classes {
	--orv-btn-bg: var(--orvt-card-btn-bg, var(--orv-accent));
	--orv-btn-ink: var(--orvt-card-btn-ink, #fff);
	--orv-btn-bg-hover: var(--orvt-card-btn-hover, var(--orv-accent-hover));
}

/* Con la foto apagada hay que devolver la rejilla a tres columnas: esconder la
   imagen sin tocarla dejaría su columna vacía y la tarjeta descuadrada. */
.orvt-s--no-thumb .orv-card__media {
	display: none;
}

.orvt-s--no-thumb .orv-card--media {
	grid-template-columns: 88px 1fr auto;
}

/* --- Adaptación a móvil --------------------------------------------------- */

@media (max-width: 860px) {
	.orvt-s {
		padding-block: var(--orv-space-7);
		padding-bottom: calc( var(--orv-space-7) + var(--orvt-divider-h, 0px) );
	}

	.orvt-hero--right,
	.orvt-hero--left,
	.orvt-hero--split-right,
	.orvt-hero--split-left,
	.orvt-split {
		grid-template-columns: 1fr;
	}

	/* A media sección en un móvil no hay mitades: se apila. El alto elegido
	   deja de aplicarse —una foto a pantalla completa encima del titular
	   obligaría a hacer scroll para leer de qué va el sitio— y la foto pasa a
	   una franja de proporción fija debajo del texto. */
	.orvt-s--bleed-tall .orvt-hero,
	.orvt-s--bleed-full .orvt-hero {
		min-height: 0;
	}

	.orvt-hero--split-right .orvt-hero__text,
	.orvt-hero--split-left .orvt-hero__text {
		order: 0;
		padding-block: var(--orv-space-7);
		padding-inline: var(--orv-space-5);
	}

	.orvt-hero__bleed {
		position: relative;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	/* En una sola columna el orden visual vuelve a ser el del HTML: el titular
	   primero y la imagen después. */
	.orvt-hero--left .orvt-hero__text,
	.orvt-split--right .orvt-media,
	.orvt-split--right .orvt-map {
		order: 0;
	}

	.orvt-hero--right .orvt-s__head,
	.orvt-hero--left .orvt-s__head {
		text-align: center;
	}

	.orvt-hero--right .orvt-actions,
	.orvt-hero--left .orvt-actions {
		justify-content: center;
	}

	/* Un separador de 160 px en una pantalla de 390 se come media sección. */
	.orvt-divider {
		height: calc( min( var(--orvt-divider-h, 60px), 72px ) + 1px );
	}

	.orvt-faq__q {
		font-size: var(--orv-text-base);
	}

	/* En una columna la tarjeta ya no tiene rejilla que reponer. */
	.orvt-s--no-thumb .orv-card--media {
		grid-template-columns: 1fr;
	}
}