/* ==========================================================================
   Host Club — componentes: CTA Experiências (loop animado) e modal de pedido
   ========================================================================== */

/* CTA Experiências --------------------------------------------------------- */
.exp-cta { position: relative; overflow: hidden; isolation: isolate; background: var(--color-primary); color: #fff; padding-bottom: clamp(3rem, 6vw, 5rem); }
.exp-cta__glow {
	position: absolute; inset: -30%; z-index: -1;
	background:
		radial-gradient(40% 35% at 20% 30%, rgba(226, 96, 63, .45), transparent 70%),
		radial-gradient(35% 30% at 80% 70%, rgba(37, 211, 202, .28), transparent 70%),
		radial-gradient(30% 30% at 60% 20%, rgba(255, 196, 120, .22), transparent 70%);
	filter: blur(30px);
	animation: exp-glow 18s ease-in-out infinite alternate;
}
@keyframes exp-glow {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
	100% { transform: translate3d(-4%, 3%, 0) rotate(-6deg) scale(1); }
}

.exp-cta__head { text-align: center; max-width: 900px; }
.exp-cta__eyebrow { display: inline-block; margin: 0 0 1rem; padding: .35rem .9rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.exp-cta__title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.1rem, 5.5vw, 4.2rem); line-height: 1.12; margin: 0 0 1rem; }
.exp-cta__text { max-width: 56ch; margin: 0 auto 2rem; font-size: 1.1rem; opacity: .9; }
.exp-cta__btn { animation: exp-pulse 2.6s ease-in-out infinite; }
.exp-cta__arrow { display: inline-block; transition: transform .3s var(--ease-out, ease); }
.exp-cta__btn:hover .exp-cta__arrow { transform: translateX(5px); }
@keyframes exp-pulse {
	0%, 100% { box-shadow: 0 12px 30px -10px rgba(226, 96, 63, .8), 0 0 0 0 rgba(226, 96, 63, .45); }
	50%      { box-shadow: 0 12px 30px -10px rgba(226, 96, 63, .8), 0 0 0 14px rgba(226, 96, 63, 0); }
}

/* Palavra rotativa: 5 palavras + repetição da primeira para o loop */
.exp-cta__rotator { display: inline-flex; vertical-align: bottom; height: 1.15em; overflow: hidden; color: var(--color-accent); font-style: italic; }
.exp-cta__words { display: flex; flex-direction: column; }
.exp-cta__word { display: block; height: 1.15em; line-height: 1.15; white-space: nowrap; }
.exp-cta__rotator[data-count="5"] .exp-cta__words { animation: exp-words 12.5s cubic-bezier(.76, 0, .24, 1) infinite; }
@keyframes exp-words {
	0%, 16%  { transform: translateY(0); }
	20%, 36% { transform: translateY(-1.15em); }
	40%, 56% { transform: translateY(-2.3em); }
	60%, 76% { transform: translateY(-3.45em); }
	80%, 96% { transform: translateY(-4.6em); }
	100%     { transform: translateY(-5.75em); }
}
@media (max-width: 639px) { .exp-cta__rotator { display: flex; justify-content: center; margin-inline: auto; } }

/* Faixas em loop infinito (duas cópias de cada faixa) */
.exp-cta__marquees { display: grid; gap: 1.1rem; margin-top: clamp(2.5rem, 6vw, 4rem); transform: rotate(-3deg) scale(1.06); }
.marquee {
	--speed: 45s;
	display: flex; overflow: hidden; gap: 1.1rem; padding-block: .6rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; flex-shrink: 0; gap: 1.1rem; min-width: 100%; margin: 0; padding: 0; list-style: none; animation: marquee var(--speed) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - 1.1rem)); } }

.exp-tile { flex: 0 0 auto; width: clamp(200px, 22vw, 290px); }
.exp-tile a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.exp-tile:nth-child(odd) a { transform: rotate(1.5deg); }
.exp-tile:nth-child(even) a { transform: rotate(-1.5deg); }
.exp-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.exp-tile a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5, 25, 32, .8)); }
.exp-tile__title { position: absolute; left: .9rem; right: .9rem; bottom: .75rem; z-index: 1; font-weight: 700; line-height: 1.25; }
.exp-tile a:hover img { transform: scale(1.08); }

.marquee--words { --speed: 32s; }
.exp-word { display: inline-flex; align-items: center; gap: 1.1rem; font: 500 clamp(2rem, 5vw, 3.6rem)/1.1 var(--font-heading); white-space: nowrap; }
.exp-word__dot { display: inline-block; color: var(--color-accent); font-size: .5em; animation: exp-spin 6s linear infinite; }
.marquee--outline .exp-word { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .6); }
@keyframes exp-spin { to { transform: rotate(360deg); } }

/* Modal de pedido --------------------------------------------------------- */
html.has-modal { overflow: hidden; }
.request-modal {
	width: min(640px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
	padding: 0; border: 0; border-radius: calc(var(--radius) * 1.3);
	background: #fff; color: var(--color-text);
	box-shadow: 0 40px 90px -20px rgba(5, 25, 32, .55);
	overflow: hidden;
}
/* Cabeçalho fixo + corpo com scroll próprio */
.request-modal[open] { display: flex; flex-direction: column; animation: modal-in .45s var(--ease-out, ease); }
.request-modal::backdrop { background: rgba(5, 25, 32, .6); backdrop-filter: blur(4px); }
.request-modal[open]::backdrop { animation: modal-fade .3s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes modal-fade { from { opacity: 0; } }

.request-modal__close {
	position: absolute; top: .9rem; right: .9rem; z-index: 3;
	display: grid; place-items: center; width: 44px; height: 44px;
	border: 0; border-radius: 50%; background: #fff; color: var(--color-text);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.request-modal__close:hover { background: var(--color-soft); }

.request-modal__summary { flex-shrink: 0; display: flex; align-items: center; gap: 1rem; padding: 1.5rem 4.5rem 1.25rem 1.5rem; border-bottom: 1px solid var(--color-line); background: var(--color-soft); }
.request-modal__image { width: 88px; height: 88px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-sm); }
.request-modal__image[hidden] { display: none; }
.request-modal__eyebrow { margin: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-600); }
.request-modal__eyebrow:empty, .request-modal__meta:empty { display: none; }
.request-modal__title { font: 500 clamp(1.35rem, 3.5vw, 1.75rem)/1.2 var(--font-heading); color: var(--color-primary); margin: .2rem 0; }
.request-modal__meta { margin: 0; color: var(--color-muted); font-size: .95rem; }

.request-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-line) transparent; }
.request-modal__panel { padding: 1.5rem; }
.request-modal__panel .notice { margin-bottom: 1.25rem; }
.request-modal .form { gap: .9rem; }
.request-modal .form__check--consent { margin-block: .25rem .5rem; }
@media (min-width: 560px) { .form__row--3 { grid-template-columns: 1fr 1fr .7fr; } }
@media (max-width: 559px) {
	.request-modal { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
	.request-modal__image { width: 60px; height: 60px; }
	.request-modal__summary { padding: 1rem 4rem 1rem 1rem; }
	.request-modal__panel { padding: 1.1rem; }
}

/* Botão "Reservar" nos cartões fica acima do link que cobre o cartão */
.card__cta { position: relative; z-index: 2; align-self: flex-start; margin-top: .75rem; }

/* Movimento reduzido ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.marquee__track, .exp-cta__glow, .exp-cta__btn, .exp-word__dot, .exp-cta__words { animation: none !important; }
	.marquee { overflow-x: auto; }
	.request-modal[open], .request-modal[open]::backdrop { animation: none; }
}

/* Resolução de Litígios — grelha de entidades RAL --------------------------- */
.ral-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; list-style: none; margin: 2.5rem 0 0; padding: 0; }
.ral-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.75rem 1.25rem; text-align: center; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); transition: box-shadow .25s, transform .25s; }
.ral-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.ral-card--featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.ral-card__badge { display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 .75rem; margin-bottom: .6rem; border-radius: 999px; background: var(--color-soft); color: var(--color-primary); font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
.ral-card--featured .ral-card__badge { background: var(--color-accent); color: #fff; }
.ral-card__name { margin: 0; font: 700 1.05rem var(--font-body); color: var(--color-text); }
.ral-card__desc { margin: 0 0 .6rem; color: var(--color-muted); font-size: .9rem; line-height: 1.45; }
.ral-card__link { margin-top: auto; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent-600); text-decoration: none; word-break: break-word; }
.ral-card__link:hover { text-decoration: underline; }
.ral-more { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-line); text-align: center; }
.ral-more__title { margin: 0 0 .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; }