/**
 * Sistema de design "Olá Viseu" — componentes partilhados.
 *
 * Handle: `olaviseu-ui`. NÃO é carregado globalmente: cada página que precise
 * dele declara-o como dependência do seu próprio stylesheet (ver
 * olaviseu_enqueue_restaurantes_assets() em functions.php).
 *
 * Os tokens (--olv-*) vivem no :root de theme.css. Aqui só há componentes.
 *
 * Regra: se um componente serve mais do que uma página, o lugar dele é este
 * ficheiro. Nunca duplicar estas classes num CSS de página.
 *
 * Documentação: .agents/skills/olaviseu-pt/design-system.md
 */

/* ------------------------------------------------------------------ */
/* 2. Shell de página                                                  */
/* ------------------------------------------------------------------ */

/* Toda a página nova aplica `olv-page` ao <main>: dá o desconto do header
   fixo e activa as regras de base abaixo. */
.olv-page {
	--olv-header-h: 5rem;

	padding-top: 5rem;
	color: var(--olv-ink);
	background: var(--olv-surface);
}

@media (min-width: 768px) {
	.olv-page {
		--olv-header-h: 6.5rem;

		padding-top: 6.5rem;
	}
}

/* Com hero, o padding sai da página e entra no próprio hero: a marca d'água
   e a aurora passam por trás do header de vidro, em vez de começarem por
   baixo e se separarem dele no scroll. */
.olv-page:has(.olv-hero) {
	padding-top: 0;
}

/* O atributo `hidden` é derrotado pelo `display` das próprias classes
   (regra de autor ganha à do UA). Sem isto, esconder por JS não funciona. */
.olv-page [hidden] {
	display: none !important;
}

.olv-page ::selection {
	background: var(--olv-primary-soft);
	color: var(--olv-primary-deep);
}

.olv-page :focus-visible {
	outline: 2px solid var(--olv-primary-bright);
	outline-offset: 3px;
	border-radius: 6px;
}

.olv-page .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* 3. Barra de progresso de leitura                                    */
/* ------------------------------------------------------------------ */

.olv-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 60;
	pointer-events: none;
	background: transparent;
}

.olv-progress__bar {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--olv-primary), var(--olv-primary-bright) 55%, var(--olv-accent));
	transform-origin: left center;
	transition: width 0.12s linear;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.olv-progress__bar {
			width: 100%;
			transform: scaleX(0);
			animation: olv-scroll-progress linear both;
			animation-timeline: scroll();
			transition: none; /* Desativa a transição do JS */
		}
		@keyframes olv-scroll-progress {
			to { transform: scaleX(1); }
		}
	}
}

/* ------------------------------------------------------------------ */
/* 4. Hero                                                             */
/* ------------------------------------------------------------------ */

.olv-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem);
	padding-top: calc(var(--olv-header-h) + clamp(3rem, 8vw, 5.5rem));
	background:
		radial-gradient(120% 90% at 12% 0%, var(--olv-primary-soft) 0%, transparent 60%),
		linear-gradient(180deg, var(--olv-surface) 0%, var(--olv-surface-2) 100%);
	border-bottom: 1px solid var(--olv-line);
}

/* Marca d'água fotográfica no fundo do hero (fotos já validadas do Maps). */
.olv-hero__mark {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	overflow: hidden;
}

.olv-hero__mark-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	opacity: 0.09;
	filter: grayscale(0.2) saturate(0.7);
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.olv-hero__mark-img {
			animation: olv-parallax linear both;
			animation-timeline: scroll();
			transform-origin: top center;
		}
		@keyframes olv-parallax {
			to { transform: translateY(12%); }
		}
	}
}

/* Aurora ambiente — três manchas de cor em deriva lenta. */
.olv-hero__aurora {
	position: absolute;
	inset: -20% -10%;
	z-index: -1;
	filter: blur(70px);
	opacity: 0.38;
}

.olv-hero__aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	will-change: transform;
}

.olv-hero__aurora span:nth-child(1) {
	width: 34vw;
	height: 34vw;
	min-width: 260px;
	min-height: 260px;
	top: -6%;
	left: -4%;
	background: color-mix(in srgb, var(--olv-primary) 32%, transparent);
	animation: olv-drift-a 22s ease-in-out infinite alternate;
}

.olv-hero__aurora span:nth-child(2) {
	width: 26vw;
	height: 26vw;
	min-width: 200px;
	min-height: 200px;
	top: 18%;
	right: 4%;
	background: color-mix(in srgb, var(--olv-accent) 28%, transparent);
	animation: olv-drift-b 26s ease-in-out infinite alternate;
}

.olv-hero__aurora span:nth-child(3) {
	width: 22vw;
	height: 22vw;
	min-width: 180px;
	min-height: 180px;
	bottom: -12%;
	left: 38%;
	background: color-mix(in srgb, var(--olv-heritage) 26%, transparent);
	animation: olv-drift-c 30s ease-in-out infinite alternate;
}

@keyframes olv-drift-a {
	to { transform: translate3d(8vw, 4vh, 0) scale(1.15); }
}

@keyframes olv-drift-b {
	to { transform: translate3d(-6vw, 6vh, 0) scale(1.2); }
}

@keyframes olv-drift-c {
	to { transform: translate3d(5vw, -5vh, 0) scale(0.9); }
}

.olv-hero__inner {
	max-width: 60rem;
}

.olv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 1rem;
	padding: 0.35rem 0.85rem 0.35rem 0.6rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid var(--olv-line);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--olv-primary);
}

.olv-eyebrow .material-symbols-outlined {
	font-size: 1rem;
}

.olv-eyebrow--plain {
	padding: 0;
	background: none;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	margin-bottom: 0.5rem;
}

/* Assinatura de autoria, no herói das páginas editoriais. Assenta sobre
   `.olv-eyebrow--plain` e muda duas coisas de propósito:

   - sem maiúsculas nem `letter-spacing` de rótulo: isto é o nome de uma
     pessoa, não uma etiqueta de categoria, e em versalete perde-se metade
     da razão de o ter posto lá;
   - o link fica sublinhado. A cor do eyebrow (`--olv-primary`) é a mesma dos
     links do tema, por isso sem sublinhado o nome não se distinguia do texto
     à volta — nem à vista, nem por quem não distingue as duas cores. */
.olv-byline {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

.olv-byline a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.olv-byline a:hover,
.olv-byline a:focus-visible {
	text-decoration-thickness: 2px;
}

.olv-hero__title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: clamp(2.25rem, 6.4vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin: 0 0 1rem;
	color: var(--olv-ink);
	text-wrap: balance;
}

.olv-hero__title em {
	position: relative;
	font-style: italic;
	color: var(--olv-primary);
	white-space: nowrap;
}

/* Acento editorial: o <em> dos títulos grandes passa a serifado (Fraunces,
   carregado em functions.php). Só o destaque — o corpo continua em Inter. */
.olv-hero__title em,
.olv-sectionhead__title em {
	font-family: Fraunces, Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: 0;
}

/* Em ecrãs estreitos a palavra tem de poder partir: o hero tem
   `overflow: hidden` e o texto era cortado sem aviso. O sublinhado desenhado
   continua a funcionar, passa apenas a acompanhar cada linha. */
@media (max-width: 767px) {
	.olv-hero__title em {
		white-space: normal;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

/* Sublinhado desenhado — cresce quando o hero entra (JS adiciona .is-drawn). */
.olv-hero__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.04em;
	height: 0.16em;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--olv-accent) 70%, transparent), color-mix(in srgb, var(--olv-primary) 55%, transparent));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s var(--olv-ease) 0.35s;
	z-index: -1;
}

.olv-hero.is-drawn .olv-hero__title em::after {
	transform: scaleX(1);
}

.olv-hero__subtitle {
	margin: 0 0 2rem;
	max-width: 46rem;
	font-size: clamp(1rem, 1.6vw, 1.1875rem);
	line-height: 1.6;
	color: var(--olv-ink-2);
	text-wrap: pretty;
}

/* Em `flex-wrap` com `min-width: 8.5rem` sobravam ~44px à direita e as alturas
   ficavam desiguais (rótulos de 1 a 3 linhas). Uma grelha de 2 colunas iguais
   resolve as duas coisas. */
@media (max-width: 767px) {
	.olv-hero__stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.olv-stat {
		min-width: 0;
	}
}

.olv-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	padding: 0;
}

.olv-stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.1rem;
	min-width: 8.5rem;
	padding: 0.75rem 1.1rem;
	border-radius: var(--olv-radius-sm);
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--olv-line);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--olv-shadow-1);
}

.olv-stat__value {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--olv-primary);
	font-variant-numeric: tabular-nums;
}

.olv-stat__value--live::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: var(--olv-primary-bright);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--olv-primary) 35%, transparent);
	animation: olv-pulse 2.4s ease-out infinite;
}

@keyframes olv-pulse {
	70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--olv-primary) 0%, transparent); }

	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--olv-primary) 0%, transparent); }
}

.olv-stat__star {
	font-size: 1.1rem !important;
	color: var(--olv-accent);
	font-variation-settings: "FILL" 1;
}

.olv-stat__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--olv-ink-3);
}

.olv-hero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.olv-hero__chips-label {
	margin-right: 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

/* Dois percursos com rótulo no hero ("Estou de visita" / "Moro cá") — dá
   estrutura à promessa do subtítulo em vez de uma fila indiferenciada de
   chips. Uso: .olv-hero__paths > .olv-hero__path > (__pathlabel + __chips). */
.olv-hero__paths {
	display: grid;
	gap: 1.25rem;
}

.olv-hero__pathlabel {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

@media (min-width: 900px) {
	.olv-hero__paths {
		grid-template-columns: auto auto;
		justify-content: start;
		column-gap: 3rem;
	}
}

.olv-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--olv-line-strong);
	border-radius: 999px;
	background: var(--olv-surface);
	color: var(--olv-ink-2);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.25s var(--olv-ease), border-color 0.25s, color 0.25s, box-shadow 0.25s, background 0.25s;
}

@media (hover: hover) {
	.olv-chip:hover {
		transform: translateY(-2px);
		border-color: var(--olv-primary);
		color: var(--olv-primary);
		box-shadow: var(--olv-shadow-1);
	}
}

.olv-chip:active {
	transform: scale(0.97) translateY(0);
}

.olv-chip.is-active {
	background: var(--olv-primary);
	border-color: var(--olv-primary);
	color: #fff;
	box-shadow: var(--olv-shadow-glow);
}

.olv-chip__count {
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var(--olv-surface-2);
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--olv-ink-3);
	transition: background 0.25s, color 0.25s;
}

.olv-chip.is-active .olv-chip__count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.olv-chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--olv-primary-bright);
}

.olv-chip.is-active .olv-chip__dot {
	background: #fff;
}

/* ------------------------------------------------------------------ */
/* 5. Secções e cabeçalhos                                             */
/* ------------------------------------------------------------------ */

.olv-section {
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.olv-section--tinted {
	background: linear-gradient(180deg, var(--olv-surface-2) 0%, var(--olv-surface) 100%);
	border-block: 1px solid var(--olv-line);
}

.olv-sectionhead {
	margin-bottom: 2rem;
}

.olv-route__note + .olv-sectionhead {
	margin-top: 2rem;
}

.olv-sectionhead--split {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: flex-end;
}

.olv-sectionhead__title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 3.2vw, 2.125rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 0 0 0.4rem;
	color: var(--olv-ink);
}

.olv-sectionhead__sub {
	margin: 0;
	max-width: 44rem;
	color: var(--olv-ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.olv-sectionhead__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-bottom: 0.2rem;
	color: var(--olv-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s, gap 0.25s var(--olv-ease);
}

@media (hover: hover) {
	.olv-sectionhead__link:hover {
		border-color: currentColor;
		gap: 0.7rem;
	}
}

.olv-sectionhead__link .material-symbols-outlined {
	font-size: 1.05rem;
}

/* ------------------------------------------------------------------ */
/* 6. Botões e pills                                                   */
/* ------------------------------------------------------------------ */

.olv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.7rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.25s var(--olv-ease), box-shadow 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
}

.olv-btn .material-symbols-outlined {
	font-size: 1.05rem;
	transition: font-variation-settings 0.25s var(--olv-ease);
}

@media (hover: hover) {
	.olv-btn:hover .material-symbols-outlined {
		font-variation-settings: "FILL" 1;
	}
}

.olv-btn--primary {
	background: var(--olv-primary);
	color: var(--olv-surface);
	box-shadow: var(--olv-shadow-glow);
}

@media (hover: hover) {
	.olv-btn--primary:hover {
		background: var(--olv-primary-bright);
		color: #fff;
		transform: translateY(-2px);
		box-shadow: var(--olv-shadow-glow);
	}
}

.olv-btn:active {
	transform: scale(0.97) translateY(0);
}

.olv-btn--outline {
	background: var(--olv-surface);
	border-color: var(--olv-line-strong);
	color: var(--olv-ink);
}

@media (hover: hover) {
	.olv-btn--outline:hover {
		border-color: var(--olv-primary);
		color: var(--olv-primary);
		transform: translateY(-2px);
		box-shadow: var(--olv-shadow-1);
	}
}

.olv-btn--glass {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

@media (hover: hover) {
	.olv-btn--glass:hover {
		background: rgba(255, 255, 255, 0.28);
		color: #fff;
		transform: translateY(-2px);
	}
}

.olv-btn--block {
	flex: 1 1 auto;
}

.olv-btn--icon {
	flex: 0 0 auto;
	width: 2.65rem;
	height: 2.65rem;
	padding: 0;
	border-color: var(--olv-line-strong);
	background: var(--olv-surface);
	color: var(--olv-ink-2);
}

@media (hover: hover) {
	.olv-btn--icon:hover {
		border-color: var(--olv-primary);
		color: var(--olv-primary);
		transform: translateY(-2px);
	}
}

.olv-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
}

.olv-pill small {
	opacity: 0.75;
	font-size: 0.6875rem;
}

.olv-pill--rating .material-symbols-outlined {
	font-size: 0.95rem;
	color: var(--olv-accent);
	font-variation-settings: "FILL" 1;
}

/* ------------------------------------------------------------------ */
/* 7. Toolbar: pesquisa, filtros, ordenação                            */
/* ------------------------------------------------------------------ */

.olv-toolbar {
	position: sticky;
	top: calc(var(--olv-header-h) + 0.5rem);
	z-index: 30;
	margin-bottom: 1.75rem;
	padding: 0.85rem;
	border: 1px solid var(--olv-line);
	border-radius: var(--olv-radius);
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	box-shadow: var(--olv-shadow-1);
	transition: box-shadow 0.3s, border-color 0.3s, background 0.3s;
}

.olv-toolbar.is-stuck {
	border-color: var(--olv-line-strong);
	box-shadow: var(--olv-shadow-2);
	background: rgba(255, 255, 255, 0.94);
}

.olv-toolbar__main {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.olv-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 16rem;
	min-width: 12rem;
}

.olv-search__icon {
	position: absolute;
	left: 0.85rem;
	font-size: 1.15rem;
	color: var(--olv-ink-3);
	pointer-events: none;
	transition: color 0.25s;
}

.olv-search:focus-within .olv-search__icon {
	color: var(--olv-primary);
}

.olv-search__input {
	width: 100%;
	padding: 0.72rem 2.5rem 0.72rem 2.6rem;
	border: 1px solid var(--olv-line-strong);
	border-radius: 999px;
	background: var(--olv-surface);
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--olv-ink);
	outline: none;
	transition: border-color 0.25s, box-shadow 0.25s;
	-webkit-appearance: none;
	appearance: none;
}

.olv-search__input::placeholder {
	color: var(--olv-ink-3);
}

.olv-search__input::-webkit-search-cancel-button {
	display: none;
}

.olv-search__input:focus {
	border-color: var(--olv-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--olv-primary) 12%, transparent);
}

.olv-search__clear {
	position: absolute;
	right: 0.5rem;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 50%;
	background: var(--olv-surface-2);
	color: var(--olv-ink-2);
	cursor: pointer;
	transition: background 0.2s, color 0.2s, transform 0.2s var(--olv-ease);
}

@media (hover: hover) {
	.olv-search__clear:hover {
		background: var(--olv-line-strong);
		transform: rotate(90deg);
	}
}

.olv-search__clear .material-symbols-outlined {
	font-size: 1rem;
}

.olv-field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 11rem;
	min-width: 9.5rem;
}

.olv-field__icon {
	position: absolute;
	left: 0.75rem;
	font-size: 1.05rem;
	color: var(--olv-ink-3);
	pointer-events: none;
}

.olv-field__chevron {
	position: absolute;
	right: 0.6rem;
	font-size: 1.05rem;
	color: var(--olv-ink-3);
	pointer-events: none;
	transition: transform 0.25s var(--olv-ease);
}

@media (hover: hover) {
	.olv-field:hover .olv-field__chevron {
		transform: translateY(2px) rotate(180deg);
	}
}

.olv-field__select {
	width: 100%;
	padding: 0.72rem 2rem 0.72rem 2.35rem;
	border: 1px solid var(--olv-line-strong);
	border-radius: 999px;
	background: var(--olv-surface);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--olv-ink);
	cursor: pointer;
	outline: none;
	text-overflow: ellipsis;
	transition: border-color 0.25s, box-shadow 0.25s, color 0.25s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

@media (hover: hover) {
	.olv-field__select:hover {
		border-color: var(--olv-primary);
	}
}

.olv-field__select:focus {
	border-color: var(--olv-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--olv-primary) 12%, transparent);
}

.olv-field__select.is-set {
	border-color: var(--olv-primary);
	color: var(--olv-primary);
	background: var(--olv-primary-soft);
}

.olv-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	flex: 0 0 auto;
	padding: 0.55rem 0.95rem 0.55rem 0.75rem;
	border: 1px solid var(--olv-line-strong);
	border-radius: 999px;
	background: var(--olv-surface);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.25s, background 0.25s;
}

@media (hover: hover) {
	.olv-switch:hover {
		border-color: var(--olv-primary);
	}
}

.olv-switch__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.olv-switch__track {
	position: relative;
	width: 2.2rem;
	height: 1.25rem;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--olv-line-strong);
	transition: background 0.3s var(--olv-ease);
}

.olv-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s var(--olv-ease);
}

.olv-switch__input:checked + .olv-switch__track {
	background: var(--olv-primary-bright);
}

.olv-switch__input:checked + .olv-switch__track .olv-switch__thumb {
	transform: translateX(0.95rem);
}

.olv-switch__input:focus-visible + .olv-switch__track {
	outline: 2px solid var(--olv-primary-bright);
	outline-offset: 3px;
}

.olv-switch__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--olv-ink-2);
	white-space: nowrap;
}

.olv-switch__input:checked ~ .olv-switch__label {
	color: var(--olv-primary-deep);
}

.olv-view {
	display: none;
	flex: 0 0 auto;
	padding: 3px;
	gap: 2px;
	border: 1px solid var(--olv-line-strong);
	border-radius: 999px;
	background: var(--olv-surface);
}

@media (min-width: 900px) {
	.olv-view {
		display: flex;
	}
}

.olv-view__btn {
	width: 2.1rem;
	height: 2.1rem;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--olv-ink-3);
	cursor: pointer;
	transition: background 0.25s, color 0.25s;
}

@media (hover: hover) {
	.olv-view__btn:hover {
		color: var(--olv-primary);
	}
}

.olv-view__btn.is-active {
	background: var(--olv-primary);
	color: #fff;
}

.olv-view__btn .material-symbols-outlined {
	font-size: 1.15rem;
}

.olv-toolbar__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--olv-line);
}

.olv-results {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--olv-ink-2);
	font-variant-numeric: tabular-nums;
}

.olv-results strong {
	color: var(--olv-primary);
}

.olv-activefilters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.olv-tagfilter {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.22rem 0.4rem 0.22rem 0.65rem;
	border: 1px solid var(--olv-primary);
	border-radius: 999px;
	background: var(--olv-primary-soft);
	color: var(--olv-primary);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	animation: olv-pop 0.3s var(--olv-ease) both;
	transition: background 0.2s;
}

@media (hover: hover) {
	.olv-tagfilter:hover {
		background: var(--olv-primary-soft);
	}
}

.olv-tagfilter .material-symbols-outlined {
	font-size: 0.9rem;
}

@keyframes olv-pop {
	from { opacity: 0; transform: scale(0.8); }

	to { opacity: 1; transform: scale(1); }
}

.olv-clearall {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: auto;
	padding: 0.3rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--olv-ink-3);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

@media (hover: hover) {
	.olv-clearall:hover {
		color: var(--olv-heritage);
		background: var(--olv-heritage-soft);
	}
}

.olv-clearall .material-symbols-outlined {
	font-size: 1rem;
}

/* ------------------------------------------------------------------ */
/* 8. Grelha e cartões                                                 */
/* ------------------------------------------------------------------ */

.olv-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.olv-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.olv-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Recomendações: um trilho horizontal em ecrãs pequenos. */
@media (max-width: 639px) {
	.olv-grid--rail {
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 0.75rem;
		margin-inline: calc(var(--olaviseu-margin-mobile) * -1);
		padding-inline: var(--olaviseu-margin-mobile);
		scrollbar-width: none;
	}

	.olv-grid--rail::-webkit-scrollbar {
		display: none;
	}

	.olv-grid--rail > .olv-card {
		scroll-snap-align: start;
	}
}

/* /onde-comer/ põe uma centena de cartões na mesma grelha. Sem isto o browser
   compõe todos no primeiro paint, mesmo os que estão a dezenas de ecrãs de
   distância. O trilho horizontal fica de fora: aí os cartões estão todos na
   mesma linha e saltar a renderização estragaria o dimensionamento do snap. */
.olv-grid:not(.olv-grid--rail) > .olv-card {
	content-visibility: auto;
	/* A altura que o browser assume antes de medir o cartão. Sem ela a barra
	   de scroll salta à medida que os cartões entram. */
	contain-intrinsic-size: auto 420px;
}

/* Na grelha compacta do telemóvel os cartões são linhas, não cartões. */
@media (max-width: 639px) {
	.olv-grid--compact > .olv-card {
		contain-intrinsic-size: auto 112px;
	}
}

/* Grelha com hierarquia ("bento"): os dois primeiros cartões — um percurso
   por público — ocupam metade da largura cada; o resto segue a três por
   linha. Abaixo de 1024px a grelha base já resolve. Uso: juntar
   `olv-grid--featured` e pôr os dois cartões de entrada em primeiro. */
@media (min-width: 1024px) {
	.olv-grid--featured {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.olv-grid--featured > .olv-card {
		grid-column: span 2;
	}

	.olv-grid--featured > .olv-card:nth-child(-n+2) {
		grid-column: span 3;
	}

	.olv-grid--featured > .olv-card:nth-child(-n+2) .olv-card__title {
		font-size: 1.35rem;
	}
}

.olv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--olv-line);
	border-radius: var(--olv-radius);
	background: var(--olv-surface);
	overflow: hidden;
	box-shadow: var(--olv-shadow-1);
	transition: transform 0.4s var(--olv-ease), box-shadow 0.4s var(--olv-ease), border-color 0.4s;
}

@media (hover: hover) {
	.olv-card:hover {
		transform: translateY(-6px);
		border-color: color-mix(in srgb, var(--olv-primary) 28%, transparent);
		box-shadow: var(--olv-shadow-2);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.olv-card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 10;
		pointer-events: none;
		background: radial-gradient(
			600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
			color-mix(in srgb, var(--olv-primary) 5%, transparent),
			transparent 40%
		);
		opacity: 0;
		transition: opacity 0.4s var(--olv-ease);
	}
	
	.olv-card:hover::after {
		opacity: 1;
	}
}

.olv-card.is-filtered-out {
	display: none;
}

.olv-card.is-beyond-page {
	display: none;
}

/* Estado de entrada aplicado por JS — nunca por defeito no CSS. */
.olv-card.olv-enter {
	opacity: 0;
	transform: translateY(22px);
}

.olv-card.olv-enter.is-in {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s var(--olv-ease), transform 0.6s var(--olv-ease);
}

.olv-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--olv-surface-2);
}

/* Skeleton + fade-in só quando o JS assume o carregamento da imagem. */
.olv-card__media.js-fade {
	background: linear-gradient(100deg, #eef1ef 25%, #f7faf8 45%, #eef1ef 65%);
	background-size: 300% 100%;
	animation: olv-shimmer 1.4s linear infinite;
}

.olv-card__media.js-fade.is-ready {
	animation: none;
	background: var(--olv-surface-2);
}

@keyframes olv-shimmer {
	from { background-position: 150% 0; }

	to { background-position: -150% 0; }
}

.olv-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.6s ease, transform 0.7s var(--olv-ease);
}

.olv-card__media.js-fade .olv-card__img {
	opacity: 0;
	transform: scale(1.04);
}

.olv-card__media.js-fade .olv-card__img.is-loaded {
	opacity: 1;
	transform: scale(1);
}

@media (hover: hover) {
	.olv-card:hover .olv-card__img {
		transform: scale(1.07);
	}
}

.olv-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(36, 48, 42, 0.55), rgba(36, 48, 42, 0.05) 42%, transparent 70%);
	opacity: 0.9;
	pointer-events: none;
}

.olv-card__rating,
.olv-card__price {
	position: absolute;
	bottom: 0.7rem;
	z-index: 2;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(10, 18, 12, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.olv-card__rating {
	left: 0.7rem;
}

/* A classificação do Google é o dado em que as pessoas mais reparam no cartão
   e era decoração: `pointer-events: none` a deixar passar o clique para o link
   que cobre o cartão. Quando o renderer a emite como <a>, passa a levar às
   avaliações no Maps — que é o que quem toca num "4,6 ★" quer ver. */
a.olv-card__rating {
	pointer-events: auto;
	z-index: 3;
	text-decoration: none;
	transition: background 0.25s var(--olv-ease), border-color 0.25s var(--olv-ease);
}

@media (hover: hover) {
	a.olv-card__rating:hover {
		background: rgba(10, 18, 12, 0.75);
		border-color: rgba(255, 255, 255, 0.55);
	}
}

@media (pointer: coarse) {
	a.olv-card__rating {
		min-height: var(--olv-tap);
		padding-block: 0.5rem;
	}
}

.olv-card__rating .material-symbols-outlined {
	font-size: 0.95rem;
	color: var(--olv-accent);
	font-variation-settings: "FILL" 1;
}

.olv-card__rating small {
	font-weight: 600;
	opacity: 0.75;
}

.olv-card__price {
	right: 0.7rem;
}

.olv-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.5rem;
	padding: 1rem 1.1rem 1.1rem;
}

.olv-card__title {
	font-family: Montserrat, sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--olv-ink);
}

/* Classificação inline, ao estilo das listas do Airbnb: na vista em lista o
   selo sobre a foto sai e a nota vai para a linha do título. Os dois vivem no
   mesmo cartão porque a troca grelha/lista é feita no cliente. */
.olv-card__toprow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.olv-card__toprow .olv-card__title {
	min-width: 0;
}

.olv-card__score {
	display: none;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--olv-ink);
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	z-index: 2;
}

.olv-card__score .material-symbols-outlined {
	font-size: 0.9rem;
	color: var(--olv-accent);
	font-variation-settings: "FILL" 1;
}

.olv-card__score small {
	font-weight: 500;
	color: var(--olv-ink-3);
}

@media (min-width: 900px) {
	.olv-grid.is-list .olv-card__score {
		display: inline-flex;
	}

	.olv-grid.is-list .olv-card__rating {
		display: none;
	}
}

@media (hover: hover) {
	a.olv-card__score:hover {
		color: var(--olv-primary-deep);
	}
}

.olv-card__link {
	color: inherit;
	text-decoration: none;
}

/* Toda a superfície do cartão é clicável; os controlos abaixo sobem de camada. */
.olv-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

@media (hover: hover) {
	.olv-card:hover .olv-card__link {
		color: var(--olv-primary);
	}
}

.olv-card__type {
	margin: -0.15rem 0 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

.olv-card__desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--olv-ink-2);
}

.olv-card__meta {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-top: 0.15rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--olv-line);
}

.olv-card__metaitem {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--olv-ink-2);
}

.olv-card__metaitem .material-symbols-outlined {
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 0.05rem;
	color: var(--olv-primary);
}

.olv-card__metaitem a {
	position: relative;
	z-index: 2;
	color: var(--olv-primary);
	font-weight: 700;
	text-decoration: none;
}

@media (hover: hover) {
	.olv-card__metaitem a:hover {
		text-decoration: underline;
	}
}

.olv-card__actions {
	display: flex;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.9rem;
}

.olv-card__actions > * {
	position: relative;
	z-index: 2;
}

/* Vista em lista */
@media (min-width: 900px) {
	.olv-grid.is-list {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}

	.olv-grid.is-list .olv-card {
		flex-direction: row;
		align-items: stretch;
	}

	.olv-grid.is-list .olv-card__media {
		flex: 0 0 17rem;
		aspect-ratio: auto;
	}

	.olv-grid.is-list .olv-card__body {
		padding: 1.1rem 1.35rem;
	}

	.olv-grid.is-list .olv-card__actions {
		justify-content: flex-start;
	}

	.olv-grid.is-list .olv-btn--block {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------ */
/* 9. Badge de estado do horário                                       */
/* ------------------------------------------------------------------ */

.olv-status {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.25s var(--olv-ease), box-shadow 0.25s, filter 0.25s;
}

@media (hover: hover) {
	.olv-status:hover {
		transform: translateY(-1px);
		box-shadow: var(--olv-shadow-1);
		filter: brightness(0.97);
	}
}

.olv-status__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.olv-status__icon {
	font-size: 0.9rem !important;
	opacity: 0.7;
}

.olv-status.status-open {
	background: var(--olv-primary-soft);
	border-color: color-mix(in srgb, var(--olv-primary) 22%, transparent);
	color: var(--olv-primary-deep);
}

.olv-status.status-open .olv-status__dot {
	background: var(--olv-primary-bright);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--olv-primary) 35%, transparent);
	animation: olv-pulse 2.4s ease-out infinite;
}

.olv-status.status-closing-soon {
	background: color-mix(in srgb, var(--olv-accent) 16%, var(--olv-surface));
	border-color: color-mix(in srgb, var(--olv-accent) 28%, transparent);
	color: color-mix(in srgb, var(--olv-accent) 55%, var(--olv-ink));
}

.olv-status.status-closing-soon .olv-status__dot {
	background: var(--olv-accent);
}

.olv-status.status-closed {
	background: var(--olv-heritage-soft);
	border-color: color-mix(in srgb, var(--olv-heritage) 22%, transparent);
	color: var(--olv-heritage);
}

.olv-status.status-closed .olv-status__dot {
	background: var(--olv-heritage);
}

.olv-status.status-loading {
	background: var(--olv-surface-2);
	border-color: var(--olv-line);
	color: var(--olv-ink-3);
}

/* ------------------------------------------------------------------ */
/* 10. Estado vazio, "ver mais", nota de fonte                         */
/* ------------------------------------------------------------------ */

.olv-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 3.5rem 1.5rem;
	border: 1px dashed var(--olv-line-strong);
	border-radius: var(--olv-radius);
	background: var(--olv-surface);
	animation: olv-rise 0.45s var(--olv-ease) both;
}

.olv-empty__icon {
	font-size: 2.75rem !important;
	color: var(--olv-line-strong);
}

.olv-empty__title {
	font-family: Montserrat, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0.25rem 0 0;
	color: var(--olv-ink);
}

.olv-empty__text {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--olv-ink-2);
}

.olv-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin-top: 2.25rem;
}

.olv-more__track {
	width: min(18rem, 70%);
	height: 4px;
	border-radius: 999px;
	background: var(--olv-line);
	overflow: hidden;
}

.olv-more__fill {
	display: block;
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--olv-primary), var(--olv-primary-bright));
	transition: width 0.6s var(--olv-ease);
}

.olv-more__count {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--olv-ink-3);
	font-variant-numeric: tabular-nums;
}

.olv-more__btn .material-symbols-outlined {
	transition: transform 0.3s var(--olv-ease);
}

@media (hover: hover) {
	.olv-more__btn:hover .material-symbols-outlined {
		transform: translateY(3px);
	}
}

.olv-more__btn.is-busy {
	pointer-events: none;
	opacity: 0.7;
}

.olv-more__btn.is-busy .material-symbols-outlined {
	animation: olv-spin 0.8s linear infinite;
}

@keyframes olv-spin {
	to { transform: rotate(360deg); }
}

.olv-source {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 2.5rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--olv-ink-3);
}

.olv-source .material-symbols-outlined {
	font-size: 1rem;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* 11. Modal de horários                                               */
/* ------------------------------------------------------------------ */

.olv-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

@media (min-width: 640px) {
	.olv-modal {
		align-items: center;
	}
}

.olv-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.olv-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 16, 10, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.olv-modal__dialog {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 27rem;
	max-height: 88dvh;
	overflow-y: auto;
	padding: 1.6rem;
	border-radius: var(--olv-radius-lg) var(--olv-radius-lg) 0 0;
	background: var(--olv-surface);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.5);
	transform: translateY(24px);
	transition: transform 0.35s var(--olv-ease);
	/* Sem isto, chegar ao fim da tabela de horários continuava a fazer scroll
	   na página por trás (scroll chaining). */
	overscroll-behavior: contain;
}

/* Abaixo de 640px o diálogo é uma folha colada em baixo. */
@media (max-width: 639px) {
	.olv-modal__dialog {
		/* O CTA final ficava por baixo do home indicator do iPhone. */
		padding-bottom: calc(1.6rem + var(--olv-safe-b));
	}

	/* Pega: sinal convencional de que a folha se arrasta para fechar. */
	.olv-modal__dialog::before {
		content: "";
		position: sticky;
		top: 0;
		display: block;
		width: 2.25rem;
		height: 0.25rem;
		margin: -0.6rem auto 0.9rem;
		border-radius: 999px;
		background: var(--olv-line-strong);
	}

	.olv-modal__dialog.is-dragging {
		transition: none;
	}
}

/* Na folha (mobile) o botão passa a `sticky`: era `absolute` sobre um
   container que faz scroll, por isso desaparecia do ecrã assim que o
   utilizador rolava a tabela de horários. Precisa de fundo próprio para o
   texto não lhe passar por baixo. */
@media (max-width: 639px) {
	.olv-modal__close {
		position: sticky;
		top: 0;
		float: right;
		margin: -0.6rem -0.6rem 0 0;
		background: var(--olv-surface-2);
		box-shadow: 0 0 0 6px var(--olv-surface);
	}
}

@media (min-width: 640px) {
	.olv-modal__dialog {
		border-radius: var(--olv-radius-lg);
		transform: translateY(16px) scale(0.97);
	}
}

.olv-modal.is-open .olv-modal__dialog {
	transform: none;
}

.olv-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.1rem;
	height: 2.1rem;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 50%;
	background: var(--olv-surface-2);
	color: var(--olv-ink-2);
	cursor: pointer;
	transition: background 0.2s, transform 0.25s var(--olv-ease);
}

@media (hover: hover) {
	.olv-modal__close:hover {
		background: var(--olv-line-strong);
		transform: rotate(90deg);
	}
}

.olv-modal__header {
	margin-bottom: 1.1rem;
	padding-right: 2.5rem;
}

.olv-modal__eyebrow {
	margin: 0 0 0.3rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

.olv-modal__title {
	font-family: Montserrat, sans-serif;
	font-size: 1.3125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.35rem;
	color: var(--olv-ink);
}

.olv-modal__address {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--olv-ink-3);
}

.olv-modal__address:empty {
	display: none;
}

.olv-modal__status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
}

.olv-modal__status.status-open { background: var(--olv-primary-soft); color: var(--olv-primary-deep); }

.olv-modal__status.status-closing-soon { background: color-mix(in srgb, var(--olv-accent) 16%, var(--olv-surface)); color: color-mix(in srgb, var(--olv-accent) 55%, var(--olv-ink)); }

.olv-modal__status.status-closed { background: var(--olv-heritage-soft); color: var(--olv-heritage); }

.olv-hours {
	width: 100%;
	border-collapse: collapse;
}

.olv-hours tr {
	border-bottom: 1px solid var(--olv-line);
}

.olv-hours tr:last-child {
	border-bottom: none;
}

.olv-hours th,
.olv-hours td {
	padding: 0.6rem 0.7rem;
	font-size: 0.875rem;
	color: var(--olv-ink-2);
}

.olv-hours th {
	text-align: left;
	font-weight: inherit;
}

.olv-hours td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* "12:00 – 15:00, 19:00 – 22:30" não cabe nos ~309px da folha. Como o diálogo
   só tem `overflow-y`, o `overflow-x` passava a `auto` e a tabela fugia para
   fora num scroll horizontal invisível. No desktop cabe, por isso mantém-se
   o `nowrap` original. */
@media (max-width: 639px) {
	.olv-hours td:last-child {
		white-space: normal;
	}
}

.olv-hours tr.is-today {
	background: var(--olv-primary-soft);
	font-weight: 700;
}

.olv-hours tr.is-today th,
.olv-hours tr.is-today td {
	color: var(--olv-primary);
}

.olv-hours tr.is-today th::after {
	content: "Hoje";
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: var(--olv-primary);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.olv-modal__cta {
	margin-top: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* 12. Voltar ao topo                                                  */
/* ------------------------------------------------------------------ */

.olv-totop {
	position: fixed;
	right: calc(1rem + var(--olv-safe-r));
	bottom: calc(1rem + var(--olv-safe-b));
	z-index: 40;
	width: 2.85rem;
	height: 2.85rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--olv-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--olv-primary);
	box-shadow: var(--olv-shadow-2);
	cursor: pointer;
	opacity: 0;
	transform: translateY(14px) scale(0.9);
	pointer-events: none;
	transition: opacity 0.35s var(--olv-ease), transform 0.35s var(--olv-ease), background 0.25s;
}

.olv-totop.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

@media (hover: hover) {
	.olv-totop:hover {
		background: var(--olv-primary);
		color: #fff;
	}
}

@media (min-width: 768px) {
	.olv-totop {
		right: 1.75rem;
		bottom: 1.75rem;
	}
}

/* ------------------------------------------------------------------ */
/* 12b. Guia do viajante (must-see, roteiros, dicas)                   */
/* ------------------------------------------------------------------ */

.olv-guide-card__num {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--olv-primary);
	color: #fff;
	font-family: Montserrat, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	box-shadow: var(--olv-shadow-1);
}

.olv-grid--routes {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.olv-grid--routes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.olv-route {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	border-radius: var(--olv-radius-lg);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
	box-shadow: var(--olv-shadow-1);
	transition: transform 0.3s var(--olv-ease), box-shadow 0.3s var(--olv-ease);
}

@media (hover: hover) {
	.olv-route:hover {
		transform: translateY(-4px);
		box-shadow: var(--olv-shadow-2);
	}
}

.olv-route__time {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olv-primary);
}

.olv-route__title {
	margin: 0;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--olv-ink);
	text-wrap: balance;
}

.olv-route__desc {
	margin: 0;
	color: var(--olv-ink-2);
	font-size: 0.9375rem;
	text-wrap: pretty;
}

.olv-route__steps {
	margin: 0.25rem 0 0.5rem;
	padding-left: 1.15rem;
	color: var(--olv-ink-2);
	font-size: 0.875rem;
	line-height: 1.55;
}

.olv-route__steps a {
	color: var(--olv-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.olv-route__note,
.olv-route__alt {
	margin: 0;
	padding: 0.75rem 0.85rem;
	border-radius: var(--olv-radius-sm);
	font-size: 0.8125rem;
	line-height: 1.5;
	text-wrap: pretty;
}

.olv-route__note {
	background: var(--olv-heritage-soft);
	color: var(--olv-ink);
}

.olv-route__alt {
	background: var(--olv-primary-soft);
	color: var(--olv-ink-2);
}

.olv-route__note strong,
.olv-route__alt strong {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-heritage);
}

.olv-route__alt strong {
	color: var(--olv-primary-deep);
}

.olv-route .olv-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* Cartão de evento em destaque (homepage e páginas sazonais). */
.olv-feature {
	display: grid;
	overflow: hidden;
	border-radius: var(--olv-radius-lg);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
	box-shadow: var(--olv-shadow-2);
}

@media (min-width: 860px) {
	.olv-feature {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.olv-feature__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--olv-surface-2);
}

@media (min-width: 860px) {
	.olv-feature__media {
		aspect-ratio: auto;
		min-height: 22rem;
	}
}

.olv-feature__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.olv-feature__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--olv-ink) 62%, transparent), transparent 55%);
	pointer-events: none;
}

.olv-feature__countdown {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.6rem 1rem;
	border-radius: var(--olv-radius-sm);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--olv-shadow-1);
}

.olv-feature__countdown-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

.olv-feature__countdown-value {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--olv-primary);
	font-variant-numeric: tabular-nums;
}

.olv-feature__body {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.75rem;
}

.olv-feature__tag {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olv-heritage);
}

.olv-feature__title {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	letter-spacing: -0.02em;
	color: var(--olv-ink);
}

.olv-feature__desc {
	margin: 0;
	color: var(--olv-ink-2);
	font-size: 0.9375rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.olv-feature__list {
	margin: 0;
	padding-left: 1.15rem;
	color: var(--olv-ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.olv-feature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.5rem;
}

/* Cartão de jogo — Académico de Viseu (homepage e /academico-de-viseu/). */
.olv-match {
	overflow: hidden;
	border-radius: var(--olv-radius-lg);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
	box-shadow: var(--olv-shadow-2);
}

.olv-match__comp {
	margin: 0;
	padding: 0.65rem 1.25rem;
	background: var(--olv-academico);
	color: var(--olv-academico-on-dark);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.olv-match__teams {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 1.35rem 1.25rem 0.85rem;
}

.olv-match__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	text-align: center;
}

.olv-match__crest {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
}

.olv-match__crest--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--olv-academico);
	color: var(--olv-academico-on-dark);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
}

.olv-match__name {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--olv-ink);
	text-wrap: balance;
}

.olv-match__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	min-width: 4.5rem;
}

.olv-match__vs {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	color: var(--olv-academico);
}

.olv-match__score {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.65rem;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--olv-academico);
}

.olv-match.is-live .olv-match__score {
	color: var(--olv-academico-wine);
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.olv-match__when,
.olv-match__kick {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--olv-ink-3);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.olv-match__kick {
	color: var(--olv-primary);
}

.olv-match__venue {
	margin: 0 1.25rem 1.1rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--olv-ink-2);
}

.olv-match__prev {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.35rem 0.75rem;
	margin: 0;
	padding: 0.75rem 1.25rem;
	background: var(--olv-academico-soft);
	border-top: 1px solid var(--olv-line);
}

.olv-match__prev--win {
	border-top-color: color-mix(in srgb, var(--olv-academico-wine) 45%, var(--olv-line));
}

.olv-match__prev-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

.olv-match__prev-score {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--olv-ink);
}

.olv-match__prev--win .olv-match__prev-score {
	color: var(--olv-academico-wine);
}

.olv-match-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

/* Página do clube: aurora, eyebrow e tintas no manto negro, sem mexer nos CTAs verdes. */
.olv-academico .olv-hero__mark-img {
	opacity: 0.14;
	object-position: center 52%;
	filter: grayscale(0.1) saturate(0.85);
}

.olv-academico .olv-hero__aurora span:nth-child(1) {
	background: color-mix(in srgb, var(--olv-academico) 38%, transparent);
}

.olv-academico .olv-hero__aurora span:nth-child(2) {
	background: color-mix(in srgb, var(--olv-academico-soft) 70%, transparent);
}

.olv-academico .olv-hero__aurora span:nth-child(3) {
	background: color-mix(in srgb, var(--olv-academico-wine) 28%, transparent);
}

.olv-academico .olv-eyebrow {
	color: var(--olv-academico);
}

.olv-section--academico {
	background: linear-gradient(180deg, var(--olv-academico-soft) 0%, var(--olv-surface) 100%);
	border-block: 1px solid var(--olv-line);
}

.olv-academico .olv-agenda__item.is-today {
	border-color: color-mix(in srgb, var(--olv-academico) 40%, transparent);
	background: color-mix(in srgb, var(--olv-academico-soft) 70%, var(--olv-surface));
}

.olv-academico .olv-agenda__item.is-today .olv-agenda__date {
	background: var(--olv-academico);
	color: var(--olv-academico-on-dark);
}

.olv-academico .olv-agenda__flag {
	background: var(--olv-academico);
	color: var(--olv-academico-on-dark);
}

.olv-academico .olv-agenda__flag--soft {
	background: var(--olv-academico-soft);
	color: var(--olv-academico);
}

/* Agenda de evento — cartaz noite a noite (/feira-sao-mateus/) */

.olv-agenda {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

@media (min-width: 760px) {
	.olv-agenda {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.olv-split {
	display: grid;
	gap: 1.75rem;
	align-items: start;
}

@media (min-width: 900px) {
	.olv-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
		align-items: start;
	}

	.olv-split .olv-agenda {
		grid-template-columns: minmax(0, 1fr);
	}
}

.olv-split__title {
	margin: 0 0 0.85rem;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--olv-ink);
}

.olv-split .olv-more {
	margin-top: 1.25rem;
}

.olv-split .olv-source {
	margin-top: 1rem;
}

.olv-split .olv-agenda__item {
	padding: 0.6rem 0.75rem;
	gap: 0.65rem;
}

.olv-split .olv-agenda__date {
	width: 2.75rem;
	height: 2.75rem;
}

.olv-agenda__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.75rem 1rem;
	border-radius: var(--olv-radius-sm);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
	box-shadow: var(--olv-shadow-1);
}

.olv-agenda__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--olv-radius-sm);
	background: var(--olv-primary-soft);
	color: var(--olv-primary-deep);
}

.olv-agenda__day {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.olv-agenda__month {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.olv-agenda__info {
	min-width: 0;
}

.olv-agenda__name {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--olv-ink);
	text-wrap: balance;
}

.olv-agenda__meta {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--olv-ink-3);
}

.olv-agenda__flag {
	margin-left: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--olv-primary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.olv-agenda__flag::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
	animation: olv-agenda-pulse 1.6s ease-in-out infinite;
}

.olv-agenda__flag--soft {
	background: var(--olv-primary-soft);
	color: var(--olv-primary-deep);
}

.olv-agenda__flag--soft::before {
	animation: none;
}

@keyframes olv-agenda-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

.olv-agenda__item.is-today {
	border-color: color-mix(in srgb, var(--olv-primary) 45%, transparent);
	background: color-mix(in srgb, var(--olv-primary-soft) 55%, var(--olv-surface));
}

.olv-agenda__item.is-today .olv-agenda__date {
	background: var(--olv-primary);
	color: #fff;
}

.olv-agenda__item.is-past .olv-agenda__date {
	background: var(--olv-surface-2);
	color: var(--olv-ink-3);
}

.olv-agenda__item.is-past .olv-agenda__name {
	color: var(--olv-ink-3);
	font-weight: 600;
}

.olv-agenda__crests {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
}

.olv-agenda__crest {
	width: 2rem;
	height: 2rem;
	object-fit: contain;
}

.olv-agenda__crest.olv-match__crest--fallback {
	width: 2rem;
	height: 2rem;
	font-size: 0.75rem;
}

.olv-agenda__score {
	margin-left: auto;
	flex: none;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	color: var(--olv-academico);
}

.olv-agenda__item.is-past .olv-agenda__score {
	color: var(--olv-ink-3);
	font-weight: 600;
}

/* Tabela de classificação — Liga Portugal (/academico-de-viseu/). */
.olv-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--olv-radius);
	border: 1px solid var(--olv-line);
	background: var(--olv-surface);
	box-shadow: var(--olv-shadow-1);
}

.olv-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.olv-table th,
.olv-table td {
	padding: 0.45rem 0.5rem;
	text-align: right;
	border-bottom: 1px solid var(--olv-line);
	white-space: nowrap;
}

.olv-table--standings thead th {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
	background: var(--olv-academico-soft);
}

.olv-table tbody th {
	font-weight: 700;
	color: var(--olv-ink-2);
}

.olv-table--standings th:nth-child(2),
.olv-table__team {
	text-align: left;
}

.olv-table__team {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--olv-ink);
	white-space: nowrap;
}

.olv-table__team span {
	min-width: 0;
}

.olv-table__crest {
	width: 1.25rem;
	height: 1.25rem;
	object-fit: contain;
	flex: none;
}

.olv-table__crest.olv-match__crest--fallback {
	width: 1.25rem;
	height: 1.25rem;
	font-size: 0.65rem;
	margin-right: 0;
}

.olv-table__pts {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	color: var(--olv-ink);
}

.olv-table tbody tr:last-child th,
.olv-table tbody tr:last-child td {
	border-bottom: 0;
}

.olv-table--standings tbody tr.is-club {
	background: var(--olv-academico-soft);
}

.olv-table--standings tbody tr.is-club th,
.olv-table--standings tbody tr.is-club td {
	color: var(--olv-academico);
	font-weight: 700;
}

.olv-table--standings tbody tr.is-club th:first-child {
	box-shadow: inset 3px 0 0 var(--olv-academico);
}

/* Golos: a tabela cabe a meia largura sem GM/GS/DG. */
.olv-table--standings th:nth-child(7),
.olv-table--standings th:nth-child(8),
.olv-table--standings th:nth-child(9),
.olv-table--standings td:nth-child(7),
.olv-table--standings td:nth-child(8),
.olv-table--standings td:nth-child(9) {
	display: none;
}

@media (max-width: 899px) {
	.olv-table--standings th:nth-child(n+4):nth-child(-n+6),
	.olv-table--standings td:nth-child(n+4):nth-child(-n+6) {
		display: none;
	}
}

.olv-spot {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.olv-spot {
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
		gap: 2rem;
	}
}

.olv-spot__copy {
	display: grid;
	gap: 1.15rem;
	align-items: start;
}

@media (min-width: 640px) {
	.olv-spot__copy {
		grid-template-columns: 13rem minmax(0, 1fr);
		gap: 1.5rem;
	}
}

.olv-spot__photo {
	width: 13rem;
	height: 13rem;
	object-fit: cover;
	border-radius: var(--olv-radius);
	border: 1px solid var(--olv-line);
	box-shadow: var(--olv-shadow-1);
	background: var(--olv-surface-2);
}

.olv-spot__text {
	min-width: 0;
}

.olv-spot__lead,
.olv-spot__body {
	margin: 0.65rem 0 0;
	color: var(--olv-ink-2);
	font-size: 0.9375rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.olv-spot__stores-label {
	margin: 1.1rem 0 0.55rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

.olv-spot__stores {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.olv-spot__stores li {
	margin: 0;
}

.olv-store {
	margin: 0;
	padding: 0.4rem 0.8rem;
	border: 0;
	border-radius: 999px;
	background: var(--olv-primary-soft);
	color: var(--olv-primary-deep);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s var(--olv-ease), transform 0.2s var(--olv-ease);
}

.olv-store:focus-visible {
	background: color-mix(in srgb, var(--olv-primary) 18%, var(--olv-primary-soft));
	transform: translateY(-1px);
}

@media (hover: hover) {
	.olv-store:hover {
		background: color-mix(in srgb, var(--olv-primary) 18%, var(--olv-primary-soft));
		transform: translateY(-1px);
	}
}

.olv-modal__media {
	margin: 0 0 1rem;
	border-radius: var(--olv-radius-sm);
	overflow: hidden;
	background: var(--olv-surface-2);
}

.olv-modal__photo {
	display: block;
	width: 100%;
	height: 10.5rem;
	object-fit: cover;
}

.olv-modal__rating {
	margin: 0 0 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--olv-ink);
}

.olv-spot__map .olv-card,
.olv-stay__map .olv-card {
	margin: 0;
}

.olv-stays-more__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* /onde-ficar/ — perfil de hotel com galeria, texto e ficha Maps. */
.olv-stay {
	display: grid;
	gap: 1.5rem;
}

.olv-stay__grid {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.olv-stay__grid {
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
		gap: 2rem;
	}
}

.olv-stay__copy {
	min-width: 0;
}

.olv-stay__facts {
	margin: 1.15rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.olv-stay__facts li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	color: var(--olv-ink);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.olv-stay__facts .material-symbols-outlined {
	font-size: 1.15rem;
	color: var(--olv-primary);
	margin-top: 0.1rem;
}

.olv-stay__map-label {
	margin: 0 0 0.65rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

.olv-gallery {
	display: grid;
	gap: 0.75rem;
}

.olv-gallery__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--olv-radius);
	border: 1px solid var(--olv-line);
	box-shadow: var(--olv-shadow-1);
	background: var(--olv-surface-2);
	touch-action: pan-x pan-y;
}

.olv-gallery__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.olv-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
}

.olv-gallery__open {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
	line-height: 0;
}

.olv-gallery__open img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.olv-gallery__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
}

.olv-gallery__count {
	margin: 0;
	min-width: 4.5rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--olv-ink-2);
	font-variant-numeric: tabular-nums;
}

.olv-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 639px) {
	.olv-gallery__thumbs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.3rem;
	}
}

.olv-gallery__thumb {
	display: block;
	border-radius: var(--olv-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	line-height: 0;
	min-height: var(--olv-tap);
}

.olv-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.olv-gallery__thumb.is-active,
.olv-gallery__thumb[aria-current="true"] {
	border-color: var(--olv-primary);
}

.olv-lightbox .olv-lightbox__dialog {
	max-width: min(72rem, calc(100vw - 2rem));
	padding: 0;
	background: var(--olv-ink);
}

.olv-lightbox__figure {
	margin: 0;
	padding: 3.25rem 3.5rem 1.25rem;
}

.olv-lightbox__photo {
	display: block;
	width: 100%;
	max-height: min(78svh, 52rem);
	object-fit: contain;
	background: var(--olv-ink);
}

.olv-lightbox__cap {
	margin: 0.75rem 0 0;
	color: var(--olv-surface);
	font-size: 0.875rem;
	text-align: center;
}

.olv-lightbox__prev,
.olv-lightbox__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	background: color-mix(in srgb, var(--olv-surface) 88%, transparent);
}

.olv-lightbox__prev { left: 0.65rem; }
.olv-lightbox__next { right: 0.65rem; }

.olv-lightbox {
	align-items: center;
}

.olv-lightbox .olv-lightbox__dialog {
	max-width: min(72rem, calc(100vw - 1.25rem));
	max-height: 96dvh;
	overflow-y: auto;
	border-radius: var(--olv-radius);
	padding: 0;
	background: var(--olv-ink);
	transform: none;
}

.olv-lightbox .olv-lightbox__dialog::before {
	display: none;
}

.olv-lightbox .olv-modal__close {
	background: color-mix(in srgb, var(--olv-surface) 90%, transparent);
	color: var(--olv-ink);
}

.olv-tips {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.olv-tips {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.olv-tips--row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.olv-tip {
	padding: 1.35rem 1.4rem;
	border-radius: var(--olv-radius);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
}

.olv-section--tinted .olv-tip {
	background: var(--olv-surface);
}

.olv-tip__icon {
	display: inline-flex;
	margin-bottom: 0.65rem;
	color: var(--olv-primary);
	font-size: 1.75rem;
}

.olv-tip__title {
	margin: 0 0 0.4rem;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--olv-ink);
}

.olv-tip__text {
	margin: 0;
	color: var(--olv-ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.olv-tip .olv-btn {
	margin-top: 1rem;
}

a.olv-chip {
	text-decoration: none;
	color: inherit;
}

/* ------------------------------------------------------------------ */
/* 13. Revelação em scroll (estado aplicado por JS)                    */
/* ------------------------------------------------------------------ */

.olv-page [data-reveal].olv-enter {
	opacity: 0;
	transform: translateY(28px);
}

.olv-page [data-reveal].olv-enter.is-in {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.75s var(--olv-ease), transform 0.75s var(--olv-ease);
}

.olv-hero [data-hero-item].olv-enter {
	opacity: 0;
	transform: translateY(20px);
}

.olv-hero [data-hero-item].olv-enter.is-in {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.7s var(--olv-ease), transform 0.7s var(--olv-ease);
}

/* ------------------------------------------------------------------ */
/* 14. Movimento reduzido                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.olv-page *,
	.olv-page *::before,
	.olv-page *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.olv-hero__aurora {
		display: none;
	}

	.olv-slide__img,
	.olv-slide.is-active .olv-slide__img {
		transform: none;
	}

	.olv-card:hover,
	.olv-chip:hover,
	.olv-btn:hover,
	.olv-tab:hover {
		transform: none;
	}
}

/* ==================================================================== */
/* 20. Mobile                                                           */
/* ==================================================================== */

/* Tudo aqui está atrás de `max-width: 767px`, `pointer: coarse` ou
   `hover: none`, para o desktop ficar exatamente como estava.
   Ver .agents/skills/olaviseu-pt/design-system.md §10. */

/* -------------------------------------------------------------------- */
/* 20a. Alvos de toque                                                   */
/* -------------------------------------------------------------------- */

/* Referência: 44x44px (WCAG 2.5.8 / Apple HIG). Antes desta secção o único
   controlo do sistema que cumpria era o `.olv-totop`. */
@media (pointer: coarse) {
	.olv-btn,
	.olv-chip,
	.olv-more__btn,
	.olv-modal__cta {
		min-height: var(--olv-tap);
	}

	.olv-btn--icon {
		min-width: var(--olv-tap);
	}

	/* Abriam o modal de horários com ~24px de altura. */
	.olv-status,
	.olv-store {
		min-height: 2.25rem;
		padding-block: 0.5rem;
	}

	/* Remover um filtro exigia acertar em ~21x12px. Cresce a área sem crescer
	   a pílula, empurrando o alvo para fora com padding. */
	.olv-tagfilter,
	.olv-clearall {
		min-height: 2rem;
		padding-block: 0.45rem;
	}

	.olv-search__clear {
		width: 2.25rem;
		height: 2.25rem;
	}

	.olv-modal__close {
		width: var(--olv-tap);
		height: var(--olv-tap);
	}

	.olv-sectionhead__link {
		min-height: var(--olv-tap);
		align-items: center;
	}

	/* O telefone é o toque de maior intenção do cartão e tinha ~18px. */
	.olv-card__metaitem a {
		display: inline-flex;
		align-items: center;
		min-height: 2.25rem;
	}

	/* 16px é o limiar abaixo do qual o Safari iOS faz zoom ao focar, deixando
	   a página deslocada e com scroll horizontal. Eram 15px e 14px. */
	.olv-search__input,
	.olv-field__select {
		font-size: 1rem;
	}
}

/* -------------------------------------------------------------------- */
/* 20b. Sem hover: afordância e feedback                                 */
/* -------------------------------------------------------------------- */

@media (hover: none) {
	/* O `:hover` era o único sinal de que a pílula de estado abre o horário.
	   No toque isso não existe, por isso o sinal passa a ser permanente. */
	button.olv-status {
		border: 1px solid currentColor;
	}

	/* Só no <button>: se um dia `.olv-status` servir de emblema estático, não
	   deve ganhar um chevron a prometer que abre alguma coisa. */
	button.olv-status::after {
		content: "expand_more";
		font-family: "Material Symbols Outlined", sans-serif;
		font-size: 1rem;
		line-height: 1;
		margin-left: 0.15rem;
		opacity: 0.7;
	}

	/* Sem hover, um `:active` é a única confirmação de que o toque pegou. */
	.olv-btn:active,
	.olv-chip:active,
	.olv-store:active,
	.olv-status:active,
	.olv-card__link:active {
		transform: translateY(1px) scale(0.98);
	}

	.olv-card,
	.olv-btn,
	.olv-chip {
		-webkit-tap-highlight-color: transparent;
	}
}

/* -------------------------------------------------------------------- */
/* 20c. Layout                                                           */
/* -------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* `white-space: nowrap` + `.olv-card { overflow: hidden }` cortava rótulos
	   longos ("Onde fazer compras?") em vez de os deixar partir. */
	.olv-btn {
		white-space: normal;
	}

	/* Quadrado fixo de 13rem deixava ~120px mortos numa coluna de 328px. */
	.olv-spot__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	/* 3.5rem de padding vertical para um estado vazio é meio ecrã. */
	.olv-empty {
		padding: 2rem 1.25rem;
	}

	/* A barra fica em `top: 0`, por cima do header e dentro da faixa do notch. */
	.olv-progress {
		top: var(--olv-safe-t);
	}

	.olv-agenda__item {
		flex-wrap: wrap;
	}

	.olv-match__crest {
		width: 3.25rem;
		height: 3.25rem;
	}
}

/* Três blobs de 34vw com `blur(70px)` e animação infinita mantêm a GPU do
   telemóvel a compor permanentemente. Fica um, parado. */
@media (max-width: 767px) {
	.olv-hero__aurora span:nth-child(2),
	.olv-hero__aurora span:nth-child(3) {
		display: none;
	}

	.olv-hero__aurora span {
		animation: none;
		will-change: auto;
		filter: blur(48px);
	}
}

/* -------------------------------------------------------------------- */
/* 20c-bis. Grelha compacta                                              */
/* -------------------------------------------------------------------- */

/* Oito cartões de navegação empilhados a 16/10 são ~3 100px de scroll — e é a
   principal superfície de navegação do site. Em vez de os esconder atrás de um
   trilho horizontal (que deixaria 7 dos 8 fora de vista), passam a linhas
   compactas: tudo continua visível e a secção cai para ~900px.
   Uso: `<div class="olv-grid olv-grid--compact">`. */
@media (max-width: 639px) {
	.olv-grid--compact {
		gap: 0.75rem;
	}

	.olv-grid--compact .olv-card {
		flex-direction: row;
		align-items: stretch;
	}

	.olv-grid--compact .olv-card__media {
		flex: 0 0 7rem;
		aspect-ratio: auto;
	}

	.olv-grid--compact .olv-card__img {
		height: 100%;
	}

	.olv-grid--compact .olv-card__body {
		padding: 0.75rem 0.9rem;
		gap: 0.15rem;
	}

	/* Duas linhas chegam para dar contexto sem esticar a linha. */
	.olv-grid--compact .olv-card__desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* -------------------------------------------------------------------- */
/* 20c-ter. Legibilidade ao sol                                          */
/* -------------------------------------------------------------------- */

/* O guia é usado na rua, de dia. iOS e Android expõem o modo de alto
   contraste do sistema — quem o liga está a dizer exatamente isto. */
@media (prefers-contrast: more) {
	.olv-page {
		--olv-ink-2: #3d443f;
		--olv-ink-3: #4a534d;
		--olv-line: rgba(44, 51, 47, 0.2);
		--olv-line-strong: rgba(44, 51, 47, 0.32);
	}

	/* O vidro esbatido é o primeiro a desaparecer com reflexo no ecrã: o que
	   lá está por trás passa a competir com o texto. */
	.olv-toolbar,
	.olv-eyebrow,
	.olv-stat,
	.olv-actionbar {
		background: var(--olv-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* Os selos sobre fotografia dependem do scrim para se lerem, e a fotografia
   por baixo pode ser um céu de Verão. Num telemóvel ao sol, 0.5 de opacidade
   não chega para os 4,5:1. */
@media (max-width: 767px) {
	.olv-card__rating,
	.olv-card__price {
		background: rgba(10, 18, 12, 0.68);
	}
}

/* -------------------------------------------------------------------- */
/* 20d. Trilho horizontal                                                */
/* -------------------------------------------------------------------- */

@media (max-width: 639px) {
	.olv-grid--rail {
		/* Sem isto o snap encosta o cartão à borda do ecrã e a goteira de 16px
		   "desaparece" a partir do segundo. */
		scroll-padding-inline: var(--olaviseu-margin-mobile);
		/* Passar do último cartão disparava o gesto de voltar atrás do iOS. */
		overscroll-behavior-x: contain;
	}
}

/* -------------------------------------------------------------------- */
/* 20e. Folha de filtros                                                 */
/* -------------------------------------------------------------------- */

/* Construída em runtime pelo ui.js a partir dos controlos que já existem na
   toolbar (ver initFilterSheet). Reutiliza `.olv-modal`, que abaixo de 640px
   já é um bottom sheet — não é um componente novo. */

/* O `.olv-modal` só encosta em baixo até 639px, mas a folha de filtros vive
   até 767px: entre as duas medidas ficava um diálogo centrado com o "Ver
   resultados" a meio do ecrã, que é exatamente o que esta folha veio resolver.
   Fixa-se o comportamento de folha em toda a gama em que ela existe. */
@media (max-width: 767px) {
	.olv-sheet {
		align-items: flex-end;
	}

	.olv-sheet .olv-modal__dialog {
		max-width: none;
		border-radius: var(--olv-radius-lg) var(--olv-radius-lg) 0 0;
		transform: translateY(24px);
		/* O "Ver resultados" ficava por baixo do home indicator do iPhone. */
		padding-bottom: calc(1.6rem + var(--olv-safe-b));
	}

	.olv-sheet.is-open .olv-modal__dialog {
		transform: none;
	}

	/* O diálogo faz scroll: em `absolute` o botão saía do ecrã à primeira
	   passagem pelos filtros. */
	.olv-sheet .olv-modal__close {
		position: sticky;
		top: 0;
		float: right;
		margin: -0.6rem -0.6rem 0 0;
		background: var(--olv-surface-2);
		box-shadow: 0 0 0 6px var(--olv-surface);
	}
}

.olv-filterbtn {
	position: relative;
	flex: 0 0 auto;
}

.olv-filterbtn__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--olv-primary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.olv-sheet__body {
	display: grid;
	gap: 0.85rem;
}

/* Dentro da folha os campos ocupam a linha toda — na toolbar competiam uns
   com os outros por espaço horizontal. */
.olv-sheet__body .olv-field,
.olv-sheet__body .olv-switch {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

.olv-sheet__actions {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin-top: 1.4rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--olv-line);
}

.olv-sheet__actions .olv-btn--block {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------------- */
/* 20f. Barra de ação (thumb zone)                                       */
/* -------------------------------------------------------------------- */

/* Nas páginas de listagem os dois controlos de maior intenção — filtrar e
   abrir o mapa — viviam no topo, colados a uma toolbar por baixo de um header
   de 80px. Num telemóvel esse é o canto mais longe do polegar. A barra é
   construída em runtime pelo ui.js (ver mountActionBar) e recebe o botão de
   filtros que antes ficava na toolbar: é uma mudança de sítio, não um
   controlo novo a duplicar o que já existe. */

.olv-actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.7rem var(--olaviseu-margin-mobile);
	padding-bottom: calc(0.7rem + var(--olv-safe-b));
	background: rgba(250, 248, 244, 0.94);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid var(--olv-line);
	transform: translateY(110%);
	transition: transform 0.3s var(--olv-ease);
}

.olv-actionbar.is-visible {
	transform: none;
}

.olv-actionbar > * {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
}

.olv-actionbar .olv-btn {
	min-height: var(--olv-tap);
}

/* O voltar-ao-topo sobe, senão fica escondido por trás da barra. A barra é
   anexada no fim da `.olv-page`, depois do botão, por isso não dá para usar
   um seletor de irmão — tem de ser `:has()` a partir do pai. */
.olv-page:has(.olv-actionbar.is-visible) .olv-totop {
	bottom: calc(4.75rem + var(--olv-safe-b));
}

/* A barra é fixa e tapa o fim do documento — sem isto a última linha do
   rodapé ficava por baixo dela. A reserva tem de ser no fim do documento (o
   rodapé está fora da `.olv-page`) e é constante enquanto a barra existir,
   não só quando está visível: reservar ao aparecer empurrava a página a meio
   do scroll. */
body:has(.olv-actionbar) {
	padding-bottom: calc(4rem + var(--olv-safe-b));
}

/* Acima de 768px o polegar deixa de ser o problema e a toolbar do topo está
   ao alcance do rato. A barra é removida pelo JS, mas a guarda fica aqui
   para o caso de a remoção falhar a meio de uma rotação. */
@media (min-width: 768px) {
	.olv-actionbar {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* 20g. Legibilidade ao sol (pointer: coarse)                            */
/* -------------------------------------------------------------------- */

/* O bloco `prefers-contrast: more` só atua para quem ativou a preferência no
   sistema; um turista ao sol não a tem. Em ecrãs de toque — onde o guia é
   usado na rua — sobe-se a base: selos sobre foto mais opacos, scrim a
   opacidade plena e menos transparência no vidro da toolbar. */
@media (pointer: coarse) {
	.olv-card__rating,
	.olv-card__price {
		background: rgba(10, 18, 12, 0.68);
	}

	.olv-card__scrim {
		opacity: 1;
	}

	.olv-toolbar {
		background: rgba(255, 255, 255, 0.94);
	}

	.olv-match__comp {
		color: var(--olv-academico-on-dark);
	}
}

/* ======================================================================
   Dois públicos — seletor «Estou de visita / Moro cá» (homepage)
   Sem JS os dois percursos aparecem lado a lado, na ordem do HTML. Com JS,
   a escolha fica em localStorage e `html[data-audience]` reordena o hero e a
   grelha «Por onde começar?». Um só botão primário no hero em qualquer
   estado: o JS troca --primary/--outline entre os dois botões de entrada.
   ====================================================================== */
.olv-audience {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--olv-line-strong);
	border-radius: 999px;
	background: color-mix(in srgb, var(--olv-surface) 82%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.olv-audience__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--olv-ink-2);
	font: 700 0.8125rem/1 Inter, sans-serif;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.olv-audience__btn .material-symbols-outlined {
	font-size: 1.1rem;
}

.olv-audience__btn:hover {
	color: var(--olv-ink);
}

.olv-audience__btn:focus-visible {
	outline: 2px solid var(--olv-primary);
	outline-offset: 2px;
}

.olv-audience__btn[aria-pressed="true"] {
	background: var(--olv-primary);
	color: var(--olv-surface);
	box-shadow: var(--olv-shadow-glow);
}

.olv-audience__btn:active {
	transform: scale(0.97);
}

@media (pointer: coarse) {
	.olv-audience {
		background: var(--olv-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {
	.olv-audience {
		background: var(--olv-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* Os percursos do hero passam a painéis com descrição própria. */
.olv-hero--home .olv-hero__paths {
	gap: 1rem;
}

.olv-hero--home .olv-hero__path {
	position: relative;
	padding: 1.1rem 1.2rem 1.2rem;
	border-radius: var(--olv-radius);
	border: 1px solid var(--olv-line);
	background: color-mix(in srgb, var(--olv-surface) 78%, transparent);
	transition: border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s, box-shadow 0.35s;
}

@media (pointer: coarse), (prefers-contrast: more) {
	.olv-hero--home .olv-hero__path {
		background: var(--olv-surface);
	}
}

.olv-hero__pathdesc {
	margin: 0 0 0.9rem;
	max-width: 32ch;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--olv-ink-2);
	text-wrap: pretty;
}

@media (min-width: 900px) {
	.olv-hero--home .olv-hero__paths {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 60rem;
		column-gap: 1rem;
	}
}

/* Estado escolhido: o painel do público ganha a moldura verde e vem primeiro;
   o outro fica disponível, só mais discreto. */
html[data-audience] .olv-hero--home .olv-hero__path {
	opacity: 0.82;
}

html[data-audience="visita"] .olv-hero--home .olv-hero__path[data-path="visita"],
html[data-audience="mora"] .olv-hero--home .olv-hero__path[data-path="mora"] {
	order: -1;
	opacity: 1;
	border-color: color-mix(in srgb, var(--olv-primary) 45%, var(--olv-line));
	background: var(--olv-surface);
	box-shadow: var(--olv-shadow-1);
}

html[data-audience="visita"] .olv-hero--home .olv-hero__path[data-path="visita"] .olv-hero__pathlabel,
html[data-audience="mora"] .olv-hero--home .olv-hero__path[data-path="mora"] .olv-hero__pathlabel {
	color: var(--olv-primary-deep);
}

/* Grelha «Por onde começar?»: os dois cartões de entrada mantêm o lugar
   (bento); a partir do terceiro, o público escolhido vem primeiro. */
@media (min-width: 640px) {
	html[data-audience="mora"] [data-audience-grid] > .olv-card:nth-child(n+3)[data-for="visita"] {
		order: 2;
	}

	html[data-audience="visita"] [data-audience-grid] > .olv-card:nth-child(n+3)[data-for="mora"] {
		order: 2;
	}

	html[data-audience] [data-audience-grid] > .olv-card:nth-child(n+3)[data-for="cidade"] {
		order: 3;
	}
}

/* ======================================================================
   «Esta semana em Viseu» — agenda com datas reais (feira + Académico)
   Reutiliza .olv-agenda; acrescenta só o cartão-quadro e o rodapé.
   ====================================================================== */
.olv-week {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.olv-week {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start;
	}
}

.olv-week .olv-agenda {
	grid-template-columns: 1fr;
}

.olv-week__aside {
	padding: 1.35rem 1.4rem;
	border-radius: var(--olv-radius);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
}

.olv-week__aside-title {
	margin: 0 0 0.5rem;
	font: 700 1.0625rem/1.25 Montserrat, sans-serif;
	color: var(--olv-ink);
}

.olv-week__aside p {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--olv-ink-2);
	text-wrap: pretty;
}

.olv-week__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.olv-week__list a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.2rem;
	color: var(--olv-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--olv-line);
	transition: color 0.2s;
}

.olv-week__list li:last-child a {
	border-bottom: 0;
}

.olv-week__list a:hover,
.olv-week__list a:focus-visible {
	color: var(--olv-primary);
}

.olv-week__list .material-symbols-outlined {
	font-size: 1.2rem;
	color: var(--olv-primary);
}

.olv-agenda__item.is-match .olv-agenda__date {
	background: var(--olv-academico);
	color: var(--olv-academico-on-dark, #faf8f4);
}

/* Página «O que fazer hoje?» — dois blocos lado a lado, um por público. */
.olv-today {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 900px) {
	.olv-today {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.olv-today__col {
	padding: 1.5rem 1.5rem 1.6rem;
	border-radius: var(--olv-radius-lg);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
}

.olv-today__col--mora {
	background: var(--olv-primary-soft, #e7eee8);
	border-color: color-mix(in srgb, var(--olv-primary) 22%, transparent);
}

.olv-today__title {
	margin: 0 0 0.35rem;
	font: 700 clamp(1.25rem, 2.4vw, 1.5rem)/1.2 Montserrat, sans-serif;
	color: var(--olv-ink);
}

.olv-today__lead {
	margin: 0 0 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--olv-ink-2);
	text-wrap: pretty;
}

.olv-today__list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}

.olv-today__list li {
	display: grid;
	grid-template-columns: 3.75rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--olv-line);
}

.olv-today__list li:last-child {
	border-bottom: 0;
}

.olv-today__when {
	font: 700 0.6875rem/1.2 Inter, sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
	padding-top: 0.2rem;
}

.olv-today__what {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--olv-ink-2);
}

.olv-today__what a {
	color: var(--olv-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--olv-primary) 45%, transparent);
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.2s, color 0.2s;
}

.olv-today__what a:hover,
.olv-today__what a:focus-visible {
	color: var(--olv-primary);
	text-decoration-color: currentColor;
}

/* ======================================================================
   Bloco de destaque da home: cartaz da feira + próximo jogo do Académico
   no mesmo quadro. Abaixo de 1024px empilham; acima, feira 2/3 e jogo 1/3.
   ====================================================================== */
.olv-spotlight {
	display: grid;
	gap: 1.25rem;
	align-items: stretch;
}

@media (min-width: 1024px) {
	.olv-spotlight {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.olv-spotlight__feature {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.olv-spotlight__feature .olv-feature__media {
		min-height: 100%;
	}
}

.olv-spotlight__match {
	display: flex;
	flex-direction: column;
	padding: 1.35rem 1.4rem 1.5rem;
	border-radius: var(--olv-radius-lg);
	background: var(--olv-academico-soft);
	border: 1px solid var(--olv-line);
}

.olv-spotlight__title {
	margin: 0 0 1rem;
	font: 700 clamp(1.25rem, 2.2vw, 1.5rem)/1.2 Montserrat, sans-serif;
	letter-spacing: -0.01em;
	color: var(--olv-ink);
	text-wrap: balance;
}

.olv-spotlight__match .olv-match {
	box-shadow: var(--olv-shadow-1);
}

.olv-spotlight__match .olv-match-actions {
	margin-top: auto;
	padding-top: 1.25rem;
}

/* ======================================================================
   Hoje é útil — faixa de dados do dia (IPMA, farmácias, SNS 24, mover-se)
   ====================================================================== */
.olv-util {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.olv-util {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.olv-util {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.olv-util__item {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1rem 1.1rem;
	border-radius: var(--olv-radius);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
	color: var(--olv-ink);
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s, border-color 0.3s;
}

.olv-util__item:hover,
.olv-util__item:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--olv-shadow-2);
	border-color: color-mix(in srgb, var(--olv-primary) 35%, var(--olv-line));
}

.olv-util__icon {
	flex: 0 0 auto;
	font-size: 1.7rem;
	color: var(--olv-primary);
}

.olv-util__item--weather .olv-util__icon {
	color: var(--olv-accent);
}

.olv-util__body {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.olv-util__label {
	font: 700 0.6875rem/1.2 Inter, sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

.olv-util__value {
	font: 700 1.0625rem/1.25 Montserrat, sans-serif;
	color: var(--olv-ink);
}

.olv-util__muted {
	font-weight: 600;
	color: var(--olv-ink-3);
}

.olv-util__meta {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--olv-ink-2);
	text-wrap: pretty;
}

.olv-tip__list {
	margin: 0;
	padding: 0 0 0 1.1rem;
	display: grid;
	gap: 0.35rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--olv-ink-2);
}

.olv-tip__list a {
	color: var(--olv-ink);
	font-weight: 600;
}

.olv-week__weather {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--olv-line);
	font-size: 0.9375rem;
	color: var(--olv-ink-2);
}

.olv-week__weather .material-symbols-outlined {
	color: var(--olv-accent);
	font-size: 1.35rem;
}

.olv-week__source {
	margin-left: auto;
	font: 700 0.6875rem/1 Inter, sans-serif;
	letter-spacing: 0.05em;
	color: var(--olv-ink-3);
}

.olv-spotlight__last {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.9rem 0 0;
	font-size: 0.875rem;
	color: var(--olv-ink-2);
}

.olv-spotlight__last .material-symbols-outlined {
	font-size: 1.1rem;
	color: var(--olv-ink-3);
}

/* ======================================================================
   Guardar (localStorage) — marcador sobre a foto do cartão + O meu dia
   ====================================================================== */
.olv-save {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: color-mix(in srgb, var(--olv-ink) 55%, transparent);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background-color 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (pointer: coarse), (prefers-contrast: more) {
	.olv-save {
		background: color-mix(in srgb, var(--olv-ink) 82%, transparent);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

.olv-save .material-symbols-outlined {
	font-size: 1.3rem;
	font-variation-settings: 'FILL' 0, 'wght' 500;
	transition: font-variation-settings 0.25s;
}

.olv-save:hover,
.olv-save:focus-visible {
	background: var(--olv-primary);
}

.olv-save:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.olv-save[aria-pressed="true"] {
	background: var(--olv-primary);
	border-color: transparent;
}

.olv-save[aria-pressed="true"] .material-symbols-outlined {
	font-variation-settings: 'FILL' 1, 'wght' 500;
}

.olv-save:active {
	transform: scale(0.92);
}

.olv-save--inline {
	position: static;
	width: auto;
	height: auto;
	gap: 0.45rem;
	padding: 0.7rem 1.25rem;
	border: 1px solid var(--olv-line-strong);
	background: var(--olv-surface);
	color: var(--olv-ink);
	font: 700 0.8125rem/1 Inter, sans-serif;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.olv-save--inline::after {
	content: attr(data-label);
}

.olv-save--inline[aria-pressed="true"] {
	background: var(--olv-primary);
	color: var(--olv-surface);
}

.olv-saved__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.olv-saved__count {
	margin: 0;
	font: 700 1.0625rem/1.3 Montserrat, sans-serif;
	color: var(--olv-ink);
}

.olv-saved__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.olv-saved__item {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) auto;
	gap: 0.85rem;
	align-items: center;
	padding: 0.9rem 1rem;
	border-radius: var(--olv-radius);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
}

.olv-saved__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--olv-primary);
	color: var(--olv-surface);
	font: 700 0.875rem/1 Montserrat, sans-serif;
}

.olv-saved__name {
	margin: 0;
	font: 700 1rem/1.25 Montserrat, sans-serif;
}

.olv-saved__name a {
	color: var(--olv-ink);
	text-decoration: none;
}

.olv-saved__name a:hover {
	color: var(--olv-primary);
}

.olv-saved__meta {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--olv-ink-2);
}

.olv-saved__actions {
	display: flex;
	gap: 0.25rem;
}

.olv-saved__actions .olv-btn--icon {
	width: 2.25rem;
	height: 2.25rem;
	min-width: 0;
	padding: 0;
}

/* ======================================================================
   Pesquisa do cabeçalho — overlay sobre o índice de locais
   ====================================================================== */
.olv-omnibox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(4rem, 12vh, 8rem) 1rem 1rem;
	background: color-mix(in srgb, var(--olv-ink) 55%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.olv-omnibox.is-open {
	display: flex;
}

.olv-omnibox__panel {
	width: min(40rem, 100%);
	border-radius: var(--olv-radius-lg);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line);
	box-shadow: var(--olv-shadow-2);
	overflow: hidden;
	animation: olv-omnibox-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes olv-omnibox-in {
	from { opacity: 0; transform: translateY(-10px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.olv-omnibox__panel { animation: none; }
}

.olv-omnibox__field {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid var(--olv-line);
}

.olv-omnibox__field .material-symbols-outlined {
	color: var(--olv-ink-3);
}

.olv-omnibox__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: 500 1.0625rem/1.4 Inter, sans-serif;
	color: var(--olv-ink);
	outline: none;
}

.olv-omnibox__input::placeholder {
	color: var(--olv-ink-3);
}

.olv-omnibox__close {
	border: 0;
	background: transparent;
	color: var(--olv-ink-2);
	cursor: pointer;
	display: inline-flex;
	padding: 0.25rem;
	border-radius: 999px;
}

.olv-omnibox__close:hover,
.olv-omnibox__close:focus-visible {
	background: var(--olv-surface-2);
	color: var(--olv-ink);
}

.olv-omnibox__results {
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	max-height: min(60vh, 26rem);
	overflow-y: auto;
}

.olv-omnibox__results a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.8rem;
	border-radius: 12px;
	color: var(--olv-ink);
	text-decoration: none;
}

.olv-omnibox__results a:hover,
.olv-omnibox__results li.is-active a {
	background: var(--olv-primary-soft);
}

.olv-omnibox__results .material-symbols-outlined {
	color: var(--olv-primary);
	font-size: 1.25rem;
}

.olv-omnibox__name {
	font-weight: 600;
}

.olv-omnibox__type {
	margin-left: auto;
	font: 700 0.6875rem/1 Inter, sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
	white-space: nowrap;
}

.olv-omnibox__hint {
	margin: 0;
	padding: 0.75rem 1.1rem 0.9rem;
	font-size: 0.8125rem;
	color: var(--olv-ink-3);
	border-top: 1px solid var(--olv-line);
}

.olv-omnibox__hint a {
	color: var(--olv-primary);
	font-weight: 600;
}

/* ======================================================================
   Ficha de local (/local/{slug}/)
   ====================================================================== */
.olv-local__hero .olv-hero__mark-img {
	opacity: 0.22;
}

.olv-local__grid {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.olv-local__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.olv-local__facts .olv-sectionhead__title {
	margin-bottom: 1rem;
}

.olv-local__dl {
	margin: 0;
	display: grid;
	gap: 0.6rem;
}

.olv-local__dl > div {
	display: grid;
	gap: 0.15rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--olv-line);
}

.olv-local__dl dt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font: 700 0.6875rem/1.2 Inter, sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--olv-ink-3);
}

.olv-local__dl dt .material-symbols-outlined {
	font-size: 1rem;
	color: var(--olv-primary);
}

.olv-local__dl dd {
	margin: 0;
	font-size: 1rem;
	color: var(--olv-ink);
}

.olv-local__dl dd a {
	color: var(--olv-primary);
	font-weight: 600;
}

.olv-local__subtitle {
	margin: 1.5rem 0 0.6rem;
	font: 700 1.0625rem/1.25 Montserrat, sans-serif;
}

.olv-local__photo {
	margin: 0;
	border-radius: var(--olv-radius-lg);
	overflow: hidden;
	box-shadow: var(--olv-shadow-2);
}

.olv-local__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.olv-hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.olv-hours-table th,
.olv-hours-table td {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--olv-line);
	text-align: left;
	vertical-align: top;
}

.olv-hours-table th {
	width: 9rem;
	font-weight: 600;
	color: var(--olv-ink-2);
}

/* ======================================================================
   Faixa de consentimento de cookies (Google Analytics 4, opcional)
   Impressa fora de .olv-page (wp_footer), por isso repete aqui a regra que
   derrota o [hidden] do UA — sem ela, esconder por JS não funcionava.
   Só existe no HTML quando o tema tem OLAVISEU_GA_ID configurado.
   ====================================================================== */
.olv-cookiebar {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 1300;
	max-width: 46rem;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--olv-radius-lg);
	background: var(--olv-surface);
	border: 1px solid var(--olv-line-strong);
	box-shadow: var(--olv-shadow-2);
}

.olv-cookiebar[hidden] {
	display: none !important;
}

.olv-cookiebar__text {
	flex: 1 1 18rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--olv-ink-2);
}

.olv-cookiebar__text a {
	color: var(--olv-primary);
	font-weight: 600;
}

.olv-cookiebar__actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

@media (max-width: 480px) {
	.olv-cookiebar {
		left: 0.5rem;
		right: 0.5rem;
		bottom: 0.5rem;
		padding: 1rem;
	}

	.olv-cookiebar__actions {
		width: 100%;
	}

	.olv-cookiebar__actions .olv-btn {
		flex: 1;
	}
}

/* Abaixo de 768px a zona do polegar (`.olv-actionbar`) já ocupa o fundo do
   ecrã: a faixa de cookies sobe para não a tapar. */
@media (max-width: 767px) {
	body:has(.olv-actionbar) .olv-cookiebar {
		bottom: calc(4rem + var(--olv-safe-b) + 0.75rem);
	}
}