:root {
	--bg: #f4f4f4;
	--ink: #0d3435;
	--muted: #555451;
	--teal: #1c8788;
	--hover-dark: #4b4946;
	--font-body: "Supreme", "Helvetica Neue", Arial, sans-serif;
	--font-display: "Bevellier", Georgia, serif;
}

* {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: inherit;
}

.viseu-hero {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

/* Background video: cobre 100% da tela, sempre */
.viseu-bg-video {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}

.viseu-bg-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.viseu-bg-ellipse {
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	width: 160%;
	max-width: 1600px;
	z-index: 0;
	pointer-events: none;
	opacity: 0.6;
}

.viseu-container {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: 64px 24px 40px;
	text-align: center;
	/* .viseu-hero é flex; sem isso, o item flex não encolhe abaixo do
	   "tamanho desejado" pelo conteúdo (min-width:auto é o padrão), e a
	   pilha de cards (agora com largura calculada, não mais fixa) força o
	   container inteiro a crescer além da tela, quebrando a centralização. */
	min-width: 0;
}

.viseu-logo {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.viseu-headline {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.viseu-subtext {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1280px) {
	.viseu-headline,
	.viseu-subtext {
		max-width: none;
	}
}

/* Intro animation */
.viseu-intro {
	opacity: 0;
	transform: translateY(16px);
	animation: viseu-fade-up 0.7s ease forwards;
	animation-delay: var(--intro-delay, 0s);
}

@keyframes viseu-fade-up {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Logo */
.viseu-logo {
	margin-bottom: 40px;
}

.viseu-logo img,
.viseu-logo__img {
	max-width: 220px;
	height: auto;
}

/* Headline */
.viseu-headline {
	font-family: var(--font-display);
	font-style: italic;
	text-transform: uppercase;
	text-align: center;
	font-size: clamp(20px, 2.6vw, 30px);
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--teal);
	margin: 0 0 82px;
}

.viseu-headline em {
	font-style: italic;
}

.viseu-headline__break {
	display: block;
}

@media (min-width: 1280px) {
	.viseu-headline {
		font-size: clamp(24px, 3.1vw, 36px);
	}

	.viseu-headline__break {
		display: none;
	}
}

.viseu-headline .w-light {
	font-weight: 200;
}

.viseu-headline .w-medium {
	font-weight: 400;
}

.viseu-headline .w-bold {
	font-weight: 500;
	color: var(--teal);
}

.viseu-subtext {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted);
	text-align: center;
	margin: 0 auto 56px;
}

@media (min-width: 1280px) {
	.viseu-subtext {
		white-space: nowrap;
		font-size: clamp(13px, 1.1vw, 15px);
	}
}

/* Card stack.
   Mobile (< 1280px): um único cartão com o conteúdo do card ativo à esquerda
   e as 5 abas coloridas em fileira à direita (a do ativo fica colada no
   conteúdo). Clicar numa aba troca de lugar com quem estava ativo. Sem
   ampliação, sem blur.
   Desktop (>= 1280px): pilha sobreposta com posição absoluta, replicando a
   geometria exata do arquivo Figma (cardv4): 401x424, passo de 224px entre
   cards, aba de 25px, cantos de 10px — escalados por ~0.85 pra caber no
   container de 1100px. O card em foco cresce 10% ao passar o mouse e fica
   por cima; os demais recebem blur progressivo (1 a 4px). */
.viseu-stack {
	max-width: 1100px;
	margin: 0 auto;
	/* Valores mobile (compactos); o desktop sobrescreve estes na media query
	   de 1280px logo abaixo. */
	--card-w: 248px;
	--step: 24px;
}

/* O conjunto (frame) é só um invólucro de posicionamento: 100% transparente,
   sem fundo e sem sombra própria. A sombra é sempre de cada .viseu-card
   individualmente, então ela se move junto com o card, não fica fixa. */
.viseu-card-frame {
	position: relative;
	background: none;
	box-shadow: none;
	overflow: visible;
	height: 370px;
	/* largura real do grupo (não um valor fixo pensado pra 5 cards), pra
	   centralizar mesmo quando ultrapassa a largura da tela: margin:auto não
	   serve aqui porque o CSS zera margens automáticas quando o conteúdo é
	   mais largo que o pai, então centralizamos via left+transform (mesma
	   solução usada no desktop). */
	width: calc(var(--card-w) + (var(--total, 5) - 1) * var(--step));
	left: 50%;
	transform: translateX(-50%);
}

@media (min-width: 1280px) {
	.viseu-card-frame {
		height: var(--card-h);
	}
}

/* Cada card tem sempre a MESMA largura total (a do card da frente) e é
   empilhado com um pequeno deslocamento (left) sucessivo para a direita -
   igual à pilha do desktop, só que compacta. Os dois cards envolvidos na
   troca se movem ao mesmo tempo (sem atraso); durante a animação, o fundo
   em degradê do conjunto (.viseu-card-frame) aparece por baixo no espaço
   que fica momentaneamente descoberto entre eles - é o comportamento
   pretendido, não um erro. */
.viseu-card {
	position: absolute;
	top: 0;
	height: 100%;
	left: var( --pos-left, 0px );
	width: 248px;
	display: flex;
	min-width: 0;
	background: linear-gradient(150deg, #ffffff 0%, #c9c9c9 100%);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(13, 52, 53, 0.008), 8px 0 6px -4px rgba(0, 0, 0, 0.55);
	z-index: var( --pos-z, 1 );
	transition: left 0.35s ease, box-shadow 0.35s ease;
}

.viseu-card.is-active {
	box-shadow: 0 1.5px 3px rgba(13, 52, 53, 0.02), 8px 0 6px -4px rgba(0, 0, 0, 0.55);
}

.viseu-card__content {
	min-width: 0;
	overflow: hidden;
	text-align: left;
	padding: 0;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	opacity: 0;
	white-space: nowrap;
	position: relative;
	height: 100%;
}

.viseu-card.is-active .viseu-card__content {
	opacity: 1;
	padding: 40px 32px;
	white-space: normal;
}

.viseu-card__txt {
	/* sem transição própria: acompanha o card como um bloco só, sem animar
	   separadamente do restante do grupo */
}

.viseu-card__link {
	display: inline-flex;
	/* "Saiba mais" fixo na base do card, sempre no mesmo lugar em todos os
	   cards (não depende de quanto título/texto o card tem). */
	position: absolute;
	left: 32px;
	bottom: 40px;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.viseu-card__link span {
	color: var(--card-color, var(--teal));
	font-size: 40px;
	/* altura de linha curta: o ">" grande não deve inflar a altura do link */
	line-height: 0.5;
}

.viseu-card__logo {
	height: 40px;
	width: auto;
	margin-bottom: 16px;
	object-fit: contain;
	object-position: left;
	align-self: flex-start;
	flex-shrink: 0;
}

.viseu-card__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	line-height: 1.25;
	margin: 0 0 12px;
	color: var(--muted);
	/* O título aparece sempre por inteiro. Se o conteúdo do card não couber
	   (título muito longo), o main.js reduz a fonte aos poucos até caber
	   (--fit), em vez de cortar com reticências ou esconder o "Saiba mais". */
	font-size: calc(20px - var(--fit, 0px));
}

.viseu-card__text {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: calc(15px - var(--fit, 0px) / 2);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.5;
	color: var(--muted);
	margin: 0;
}

.viseu-card__tab {
	width: 25px;
	flex-shrink: 0;
	background: var(--card-color, var(--teal));
	cursor: pointer;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 35px;
	transition: background 0.2s ease;
}

@media (min-width: 1280px) {
	.viseu-card__tab:hover {
		background: var(--hover-dark);
	}
}

.viseu-card__tab span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: #fff;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Desktop: pilha sobreposta com posição absoluta (geometria real do Figma) */
@media (min-width: 1280px) {
	.viseu-card__logo {
		object-position: right;
		align-self: flex-end;
	}

	.viseu-stack {
		--card-w: 340px;
		--card-h: 360px;
		--step: 190px;
	}

	.viseu-card,
	.viseu-card:not(.is-active) {
		position: absolute;
		top: 0;
		left: calc(var(--slot, 0) * var(--step));
		width: var(--card-w);
		height: var(--card-h);
		/* z-index segue a ordem sequencial dos cards (--slot) de trás pra
		   frente: o card mais antigo (slot 0, mais à esquerda) sempre fica
		   por cima dos cadastrados depois dele em repouso. Só o hover/ativo
		   (regra abaixo) sobrepõe todos eles temporariamente. */
		z-index: calc(var(--total, 5) - var(--slot, 0));
		background: linear-gradient(150deg, #ffffff 0%, #c9c9c9 100%);
		border-radius: 10px;
		box-shadow: 0 14px 28px rgba(13, 52, 53, 0.14), 8px 0 16px rgba(13, 52, 53, 0.18);
		transform: scale(1);
		transform-origin: center;
		transition: transform 0.35s ease, box-shadow 0.35s ease;
		transition-delay: 0s;
	}

	/* O card inteiro (logo, subtítulo, texto, botão e aba vertical) amplia
	   como um bloco rígido só - nada se move ou reflui internamente. */
	.viseu-card.is-active {
		transform: scale(1.2);
		z-index: 1000;
		box-shadow: 0 26px 50px rgba(13, 52, 53, 0.24);
	}

	.viseu-card__content {
		flex: 1 1 auto;
		opacity: 1;
		padding: 32px 28px;
		white-space: normal;
		width: 100%;
	}

	.viseu-card__txt {
		filter: blur(calc(var(--dist, 0) * 1px));
	}

	.viseu-card__title {
		font-size: calc(28px - var(--fit, 0px));
	}

	.viseu-card__text {
		font-size: calc(17px - var(--fit, 0px) / 2);
	}

	.viseu-card__link {
		font-size: 15px;
		left: 28px;
		bottom: 28px;
	}

	.viseu-card__tab {
		width: 21px;
		border-radius: 0 8px 8px 0;
	}

	.viseu-card__tab span {
		font-size: 10px;
	}
}

/* Dots */
.viseu-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 24px 0 60px;
}

@media (min-width: 1280px) {
	/* O card em foco cresce 20% (transform:scale), então precisa de mais
	   espaço livre abaixo da pilha pra não sobrepor os dots. */
	.viseu-stack {
		margin-bottom: 100px;
	}

	.viseu-dots {
		margin-top: 0;
	}
}

.viseu-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: #cfcfcf;
	cursor: pointer;
	padding: 0;
	transition: background 0.3s ease, transform 0.3s ease;
}

.viseu-dot.is-active {
	background: var(--teal);
	transform: scale(1.3);
}

.viseu-admin-hint {
	background: #fff;
	border: 1px dashed #cfcfcf;
	border-radius: 12px;
	padding: 24px;
	color: var(--muted);
}

/* CTA: três blocos "título + frase" (título em Bevellier Bold, frase em Light) */
.viseu-cta {
	margin-top: 24px;
}

.viseu-cta__list {
	max-width: 820px;
	margin: 0 auto;
	text-align: left;
	color: var(--teal);
	font-family: var(--font-display);
	text-transform: uppercase;
}

.viseu-cta__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	padding: 18px 0;
	border-top: 1px solid rgba(28, 135, 136, 0.3);
}

.viseu-cta__item:last-child {
	border-bottom: 1px solid rgba(28, 135, 136, 0.3);
}

.viseu-cta__item h3 {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: 0.04em;
}

.viseu-cta__item p {
	margin: 0;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

@media (min-width: 720px) {
	.viseu-cta__item {
		grid-template-columns: 230px 1fr;
		gap: 28px;
		padding: 24px 0;
	}

	.viseu-cta__item h3 {
		font-size: 20px;
	}

	.viseu-cta__item p {
		font-size: 18px;
	}
}

@media (min-width: 1280px) {
	.viseu-cta__item h3 {
		font-size: 22px;
	}

	.viseu-cta__item p {
		font-size: 20px;
	}
}

.viseu-cta .viseu-button {
	margin-top: 36px;
}

.viseu-button {
	display: inline-block;
	background: var(--teal);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0.04em;
	padding: 16px 32px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.viseu-button:hover {
	background: var(--hover-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(75, 73, 70, 0.25);
}

/* Modal do CTA "Fale com nosso time": overlay + painel com iframe (HubSpot).
   O iframe só recebe `src` quando o modal abre (via JS, a partir de
   data-src), pra não carregar o formulário antes da hora. */
.viseu-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.viseu-modal.is-open {
	display: flex;
}

.viseu-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 52, 53, 0.6);
}

.viseu-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	height: min(640px, 85vh);
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(13, 52, 53, 0.35);
}

.viseu-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(13, 52, 53, 0.08);
	color: var(--ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.viseu-modal__close:hover {
	background: rgba(13, 52, 53, 0.16);
}

.viseu-modal__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

/* Footer */
.viseu-footer {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 32px 24px 56px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teal);
}

.viseu-footer__unitri {
	display: block;
	margin: 12px auto 0;
	height: 20px;
	width: auto;
	opacity: 0.7;
}

/* Responsive: card mantém o mesmo tamanho fixo (345px) em qualquer largura
   abaixo de 1280px; só reduz o padding interno em telas bem pequenas. */
@media (max-width: 400px) {
	.viseu-card.is-active .viseu-card__content {
		padding: 24px 16px;
	}

	.viseu-card__link {
		left: 16px;
		bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.viseu-intro,
	.viseu-card__content {
		animation: none !important;
		transition: none !important;
		opacity: 1;
		transform: none;
	}
}