/* ==========================================================================
   Ventana de bienvenida (inc/welcome.php): la imagen del saludo del Dr.,
   centrada sobre la página, al entrar una vez por visita.
   ========================================================================== */

.fr-welcome {
	/* Cuadrada: cabe a lo ancho y a lo alto de cualquier pantalla. */
	width: min(92vw, 35rem, calc(100vh - 5rem));
	width: min(92vw, 35rem, calc(100svh - 5rem));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--fr-ink);
}

.fr-welcome::backdrop {
	background: rgb(6 16 28 / 0.72);
}

.fr-welcome[open] {
	animation: fr-welcome-in 0.55s var(--fr-ease-out) both;
}

.fr-welcome[open]::backdrop {
	animation: fr-welcome-fade 0.4s ease both;
}

.fr-welcome__box {
	position: relative;
}

.fr-welcome__link {
	display: block;
	overflow: hidden;
	border-radius: 0.875rem;
	box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.65);
}

.fr-welcome .fr-welcome__img {
	display: block;
	width: 100%;
	height: auto;
}

.fr-welcome__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.94);
	color: var(--fr-ink);
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
	cursor: pointer;
	transition: background-color var(--fr-dur-2) var(--fr-ease-out);
}

.fr-welcome__close:hover {
	background: var(--fr-white);
}

.fr-welcome__close:focus-visible {
	outline: 2px solid var(--fr-white);
	outline-offset: 3px;
}

.fr-welcome__close svg {
	width: 1.25rem;
	height: 1.25rem;
}

@keyframes fr-welcome-in {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.97);
	}

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

@keyframes fr-welcome-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}