/* 77 · Gran Hotel — hotel de época de película: fachada rosa simétrica, llave de bronce, timbre y etiquetas.
   Guion: suena el timbre y se abre la entrada; la fachada con los nombres como letrero; la puerta giratoria gira
   con el scroll; en la fecha la llave gira, la placa de bronce se voltea y muestra el día como número de habitación. */
.c-hotel { --display-peso: 400; --nombre-color: #1F3B33; --titulo-letra: "Playfair Display"; --titulo-peso: 900; --titulo-estilo: italic; --titulo-espacio: -.01em; --dia-letra: "Limelight"; --dia-color: #3B2A10;
	--y-letra: "Playfair Display"; --y-peso: 900; --y-tam: .4em; --y-color: #6B1F2A; --radio: 4px; --vj: 64px; --sombra: 0 20px 24px rgb(31 59 51 / .25); --nombre-tam: clamp(3.4rem, 8.6vw, 7.4rem); --display-espacio: .02em; }
.c-hotel .e-y { font-style: italic; }
.c-hotel .e-evento { color: #6B1F2A; letter-spacing: .5em; font-weight: 700; font-size: .78rem; }
.c-hotel .e-nombre { line-height: 1.05; }
.c-hotel .e-fecha { color: #1F3B33; font-weight: 600; letter-spacing: .1em; }
.c-hotel .e-titulos { padding: 30px clamp(20px, 5vw, 60px); background: #F4EADA; border: 2px solid #A9763C; outline: 6px solid #F4EADA; outline-offset: 0; box-shadow: 0 0 0 9px #1F3B33, 0 30px 60px -20px rgb(31 59 51 / .5); }

.ho-fachada { --w: min(56vmin, 520px); left: 50%; top: 50%; --x: -50%; --y: -50%; --ds: .3; --ey: 30vh; --ed: .2s; --fd: 0s; opacity: .35; filter: saturate(.8); }
.ho-fachada .e-img { animation: none; }
.ho-llave { --w: min(22vmin, 220px); left: 4vw; top: 6vh; --r: -16deg; --dy: -16vh; --dr: -30deg; --ex: -20vw; --ey: 0px; --ed: .8s; --fd: 5s; --fr: 4deg; }
.ho-llave .e-img { transform-origin: 30% 10%; }
.ho-etiqueta { --w: min(16vmin, 160px); right: 6vw; bottom: 8vh; --r: 14deg; --dy: 12vh; --dr: 20deg; --ex: 20vw; --ey: 20vh; --ed: 1.1s; --fd: 6s; --fr: 3deg; }

.c-hotel .xv-entrada { background: url("img/fondo-celular.webp") center / cover; }
.ho-entrada-timbre { position: absolute; left: 50%; bottom: 8%; width: min(26vmin, 200px); translate: -50% 0; animation: ho-ding 2.4s ease-in-out infinite; }
@keyframes ho-ding { 0%, 80%, 100% { rotate: 0deg; } 85% { rotate: -6deg; } 90% { rotate: 6deg; } 95% { rotate: -3deg; } }
.c-hotel .xv-entrada-contenido { position: relative; z-index: 1; background: #F4EADA; padding: 26px 30px; border: 2px solid #A9763C; box-shadow: 0 0 0 8px #1F3B33; }

.c-hotel .e-ornamento { width: min(56%, 220px); }
.c-hotel .e-firma { font-family: "Playfair Display", serif; font-style: italic; font-weight: 900; color: #6B1F2A; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }

/* fecha: llave gira → placa con el día */
.ho-m-llave { left: 14%; top: 10%; width: 72%; transform-origin: 30% 20%; transform: rotate(calc(var(--t1) * -90deg)) scale(calc(1 - var(--t1) * .2)); opacity: clamp(0, calc((1 - var(--t2)) * 2), 1); }
.ho-m-placa { inset: 14% 22%; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #F3D79A, #C8964A 50%, #8A5A22); box-shadow: inset 0 0 0 6px rgb(255 255 255 / .25), 0 30px 40px -16px rgb(59 42 16 / .5);
	opacity: var(--t2); transform: perspective(700px) rotateY(calc((1 - var(--t2)) * 180deg)); }
.c-hotel .e-dia { font-size: clamp(4.2rem, 11vw, 6.4rem); }
.c-hotel .e-mes { font-family: "Josefin Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: #3B2A10; font-size: .85rem; margin-top: 6px; }
.c-hotel .e-anio { color: #3B2A10; }

.c-hotel .xv-superficie { background: #FFF7EA; border: 2px solid #A9763C; }
.c-hotel .e-itinerario { background: #1F3B33; --tinta: #F4EADA; --tinta-2: #E3DCCB; --acento: #E8A99A; --linea: rgba(244,234,218,.2); color: #F4EADA; }
.c-hotel .xv-momento time { color: #6B1F2A; } .c-hotel .e-itinerario .xv-momento time { color: #E8A99A; }
.c-hotel .xv-titulo .xv-script { font-family: "Limelight", serif; font-style: normal; font-weight: 400; color: #6B1F2A; }
.c-hotel .e-itinerario .xv-titulo .xv-script { color: #E8A99A; }
.ho-cierre-carrito { position: relative; display: block; width: min(26vmin, 200px); margin: 0 auto; }
.c-hotel .e-cierre-arte { position: relative; inset: auto; z-index: 0; }

@media (max-width: 760px) {
	.ho-fachada { --w: 92vw; }
	.ho-llave { --w: 32vw; left: -2vw; top: 4vh; }
	.ho-etiqueta { --w: 22vw; right: 2vw; bottom: 6vh; }
	.c-hotel { --nombre-tam: clamp(2.4rem, 10vw, 3.6rem); }
}