/* ==========================================================================
   Home — estilos específicos (Figma Desktop - Home 19627:1352)
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------------ */
.home-hero {
	position: relative; min-height: 856px; display: flex; align-items: stretch;
	background: var(--c-black); color: var(--c-white); overflow: hidden;
}
.home-hero__bg { position: absolute; inset: 0; }
.home-hero__bg picture, .home-hero__bg img, .home-hero__bg-video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* O video corre por cima da imagem. Em pausa desaparece, e o que fica a
   ver-se e a imagem, nao um retangulo preto. */
.home-hero__bg-video { transition: opacity 0.45s var(--ease-out); }
.home-hero.is-paused .home-hero__bg-video { opacity: 0; }
/* Veu uniforme para o texto branco se ler, mais um degrade na base: o
   video tem fotogramas claros (paredes brancas de auditorio) e e em
   baixo que assentam a frase de apoio e o botao. Medido: o pior
   fotograma da 4.15:1 no titulo e 4.88:1 na frase, com o veu sozinho. */
.home-hero__bg::after {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%),
		rgba(0, 0, 0, 0.5);
}
.home-hero__inner {
	position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
	padding-top: calc(var(--nav-h) + 96px); padding-bottom: 0;
	max-width: 1440px; padding-inline: 95px;
}
@media (max-width: 1280px) { .home-hero__inner { padding-inline: var(--gutter); } }
.home-hero__title { max-width: 803px; margin-top: 24px; }
.home-hero__title .accent { color: var(--c-mint); }
/* Entrada do título palavra a palavra via clip */
.home-hero__title, .home-hero__lead, .home-hero__btn, .home-hero__video-btn { opacity: 0; transform: translateY(24px); animation: heroIn 1s var(--ease-out) forwards; }
.home-hero__title { animation-delay: 0.15s; }
.home-hero__lead { animation-delay: 0.45s; }
.home-hero__btn { animation-delay: 0.6s; }
.home-hero__video-btn { animation-delay: 0.7s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.home-hero__bottom {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
	padding-bottom: 52px; margin-top: 64px;
}
.home-hero__left { position: relative; max-width: 480px; padding-top: 24px; }
.home-hero__left::before {
	content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
	background: rgba(255, 255, 255, 0.18); transform-origin: left; transform: scaleX(0);
	animation: lineIn 1.2s 0.5s var(--ease-out) forwards;
}
@keyframes lineIn { to { transform: scaleX(1); } }
.home-hero__lead { font-size: 22px; line-height: 1.2; margin-bottom: 26px; }
/* Controlo do video de fundo: discreto, no canto da linha de baixo. */
.home-hero__video-btn {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; margin-bottom: 6px;
	background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	display: grid; place-items: center; color: var(--c-white);
	transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.home-hero__video-btn:hover { background: rgba(255, 255, 255, 0.24); transform: scale(1.06); }
.home-hero__video-icon { display: grid; place-items: center; }
.home-hero__video-icon svg { width: 18px; height: 18px; }
.home-hero__video-icon--play { display: none; }
.home-hero.is-paused .home-hero__video-icon--pause { display: none; }
.home-hero.is-paused .home-hero__video-icon--play { display: grid; }

@media (max-width: 900px) {
	.home-hero { min-height: 0; }
	.home-hero__inner { padding-top: calc(var(--nav-h) + 56px); }
	.home-hero__title { margin-top: 0; }
	.home-hero__bottom { gap: 24px; margin-top: 48px; padding-bottom: 40px; }
}
@media (max-width: 600px) {
	.home-hero__lead { font-size: 18px; }
	.home-hero__video-btn { width: 36px; height: 36px; }
}

/* ---- Sem improvisos ------------------------------------------------------- */
.home-about { padding-block: var(--section-y-sm); }
.home-about__top { display: grid; grid-template-columns: minmax(0, 427fr) minmax(0, 586fr); gap: 48px 200px; align-items: start; }
.home-about__heading { display: flex; flex-direction: column; gap: 17px; }
.home-about__text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.home-about__text .lead { color: var(--c-ink); }
.home-about__gallery {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: end;
	margin-top: 130px; height: 348px;
}
.home-about__photo { border-radius: var(--radius-sm); height: 275px; background: var(--c-gray-200); }
.home-about__photo:nth-child(even) { height: 348px; }
.home-about__photo picture, .home-about__photo img { width: 100%; height: 100%; object-fit: cover; }
.home-about__stats {
	display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 32px;
	margin-top: 80px;
}
.home-stat__value { font-size: clamp(32px, 2.9vw, 42px); line-height: 1.1; color: var(--c-cyan); letter-spacing: -0.01em; }
.home-stat__label { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--c-ink-2); }
@media (max-width: 1000px) {
	.home-about__top { grid-template-columns: 1fr; gap: 28px; }
	.home-about__gallery { margin-top: 64px; height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-about__photo, .home-about__photo:nth-child(even) { height: auto; aspect-ratio: 289 / 320; }
	.home-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; margin-top: 56px; }
}
@media (max-width: 600px) {
	.home-about__gallery { gap: 12px; }
}

/* ---- Especialistas (lista sticky + cartões) ------------------------------- */
.home-services__head { margin-bottom: 72px; }
.home-services__head .section-head__text { max-width: 601px; }
.home-services__content { display: grid; grid-template-columns: minmax(0, 601fr) minmax(0, 615fr); gap: 0; align-items: start; }
.home-services__nav { position: sticky; top: calc(var(--nav-h) + 56px); }
.home-services__list { display: flex; flex-direction: column; gap: 10px; }
.home-services__link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 18px; line-height: 27px; color: var(--c-gray-07);
	transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.home-services__dot { width: 8px; height: 8px; background: #c9cdd1; transition: background-color 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.home-services__link:hover { color: var(--c-ink); }
.home-services__link.is-active { color: var(--c-ink); transform: translateX(4px); }
.home-services__link.is-active .home-services__dot { background: var(--c-gold); transform: scale(1.15); }
.home-services__cards { display: flex; flex-direction: column; gap: 61px; }
.home-service { scroll-margin-top: 140px; }
.home-service__img { height: 370px; border-radius: var(--radius-sm); background: var(--c-gray-200); }
.home-service__img picture, .home-service__img img { width: 100%; height: 100%; object-fit: cover; }
.home-service__title { margin-top: 41px; font-size: 20px; }
.home-service__text {
	margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--c-text-muted); max-width: 615px;
	text-align: justify; hyphens: auto; text-wrap: pretty;
}
@media (max-width: 900px) {
	.home-services__head { margin-bottom: 40px; }
	.home-services__content { grid-template-columns: 1fr; gap: 32px; }
	.home-services__nav { position: static; }
	.home-services__list { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
	.home-services__link { font-size: 16px; }
	.home-services__cards { gap: 48px; }
	.home-service__img { height: auto; aspect-ratio: 615 / 370; }
	.home-service__title { margin-top: 24px; }
}

/* ---- Quem confia (tickers) ----------------------------------------------- */
.home-logos { padding-block: var(--section-y-sm); background: var(--c-white); overflow: hidden; }
.home-logos .container { max-width: calc(1250px + var(--gutter) * 2); }
.home-logos__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.home-logos__head .h-2-md { max-width: 640px; }
.home-logos__tickers {
	position: relative; margin-top: 54px; display: flex; flex-direction: column; gap: 16px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.ticker { overflow: hidden; height: 100px; }
.ticker__track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.ticker.is-ready .ticker__track { animation: tickerMove var(--ticker-duration, 40s) linear infinite; }
.ticker--reverse.is-ready .ticker__track { animation-direction: reverse; }
.home-logos__tickers:hover .ticker__track { animation-play-state: paused; }
@keyframes tickerMove { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.ticker__item {
	flex: 0 0 268px; height: 100px; display: grid; place-items: center;
	border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-sm); background: var(--c-white);
}
.ticker__item img {
	width: 192px; height: 32px; object-fit: contain;
	filter: blur(3px) grayscale(1); opacity: 0.45;
	transition: filter 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.home-logos__eye {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
	background: var(--c-white); color: var(--c-mint);
	box-shadow: 0 12px 30px -10px rgba(0, 21, 23, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
	animation: eyePulse 3s var(--ease-inout) infinite;
}
.home-logos__eye svg { width: 28px; height: 28px; }
@keyframes eyePulse {
	0%, 100% { box-shadow: 0 12px 30px -10px rgba(0, 21, 23, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 0 rgba(75, 219, 195, 0.35); }
	60% { box-shadow: 0 12px 30px -10px rgba(0, 21, 23, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 18px rgba(75, 219, 195, 0); }
}
.home-logos__foot { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.home-logos__rule { display: none; }
.home-logos__text { font-size: 20px; line-height: 1.5; color: var(--c-ink-2); }

/* ---- Modo "Discrição" (sem logótipos) ------------------------------------
   Por opção do cliente a secção deixou de mostrar logótipos desfocados:
   fica uma afirmação centrada, com o selo do olho como único gráfico. */
.home-logos--statement { background: var(--c-light); padding-block: var(--section-y); }
.home-logos--statement .home-logos__head { gap: 18px; max-width: 720px; margin-inline: auto; }
.home-logos--statement .home-logos__head .h-2-md { max-width: 640px; }
.home-logos__eye--lead {
	position: static; transform: none; margin-bottom: 6px;
	width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
	background: var(--c-white); color: var(--c-mint);
	box-shadow: 0 12px 30px -10px rgba(0, 21, 23, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
	animation: eyePulse 3s var(--ease-inout) infinite;
}
.home-logos__eye--lead svg { width: 28px; height: 28px; }
.home-logos__statement {
	font-size: 18px; line-height: 1.6; color: var(--c-text-muted); max-width: 620px;
}
.home-logos--statement .home-logos__foot { margin-top: 48px; gap: 18px; }
.home-logos--statement .home-logos__rule {
	display: block; width: 100%; max-width: 420px; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.16), transparent);
}
.home-logos--statement .home-logos__text { font-size: 18px; color: var(--c-ink-2); }
@media (max-width: 600px) {
	.home-logos__eye--lead { width: 56px; height: 56px; }
	.home-logos__eye--lead svg { width: 22px; height: 22px; }
	.home-logos__statement { font-size: 16px; }
	.home-logos--statement .home-logos__text { font-size: 17px; }
}
@media (max-width: 600px) {
	.home-logos__tickers { margin-top: 40px; gap: 12px; }
	.ticker { height: 80px; }
	.ticker__item { flex-basis: 200px; height: 80px; }
	.ticker__item img { width: 150px; height: 26px; }
	.home-logos__eye { width: 56px; height: 56px; }
	.home-logos__eye svg { width: 22px; height: 22px; }
	.home-logos__text { font-size: 18px; }
}

/* ---- CreateBooking --------------------------------------------------------- */
.home-booking { padding-block: var(--section-y-sm); overflow: hidden; }
.home-booking__inner { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 656fr); gap: 40px; align-items: center; }
.home-booking__text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 684px; }
.home-booking__title { margin-top: 14px; }
.home-booking__lead { font-size: 16px; line-height: 1.5; color: var(--c-text-on-dark-muted); max-width: 499px; }
.home-booking__visual { position: relative; }
.home-booking__frame {
	position: relative; width: calc(100% + var(--gutter)); border-radius: 16px 0 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.12); border-right: 0;
	background: #0c0c0e; padding: 6px 0 6px 6px; overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(61, 183, 228, 0.25);
}
.home-booking__frame picture, .home-booking__frame img { width: 100%; height: auto; border-radius: 12px 0 0 12px; display: block; }
.home-booking__shadow {
	/* A moldura sai do container e avanca var(--gutter) para la da coluna:
	   o degrade tem de acompanhar essa largura, senao o canto inferior
	   direito da captura fica a descoberto. Fecha a negro exatamente na
	   base da moldura (140 de 180 = 78%). */
	position: absolute; left: -20px; right: calc(-1 * var(--gutter)); bottom: -40px;
	height: 180px; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 45%, var(--c-black) 70%);
}
@media (max-width: 1000px) {
	.home-booking__inner { grid-template-columns: 1fr; gap: 48px; }
	.home-booking__frame { width: calc(100% + var(--gutter)); }
}

/* ---- Etiqueta do hero ------------------------------------------------------ */
.home-hero__tagline {
	opacity: 0; transform: translateY(24px);
	animation: heroIn 1s 0.05s var(--ease-out) forwards;
	margin-bottom: 22px;
	/* Maior do que as outras etiquetas do site: é a primeira frase que
	   se lê e o cliente quis dar-lhe destaque. */
	font-size: 17px; line-height: 1.4; letter-spacing: 0.08em;
}
.home-hero__tagline .tagline__dot { width: 10px; height: 10px; flex-basis: 10px; }
@media (max-width: 600px) {
	.home-hero__tagline { margin-bottom: 14px; font-size: 14px; }
	.home-hero__tagline .tagline__dot { width: 8px; height: 8px; flex-basis: 8px; }
}

/* ---- Imagem única alternativa às quatro fotografias ------------------------ */
.home-about__wide {
	margin-top: 130px; border-radius: var(--radius-sm); overflow: hidden;
	background: var(--c-gray-200);
}
.home-about__wide picture, .home-about__wide img { width: 100%; height: auto; display: block; }
@media (max-width: 1000px) { .home-about__wide { margin-top: 64px; } }

/* ---- Blocos de detalhe das especialidades (abrem ao clicar) ---------------- */
.service-details { margin-top: 28px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.service-details__hint {
	margin: 20px 0 10px; font-size: 14px; line-height: 21px; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-gray-07);
}
.service-details__item { border-bottom: 1px dashed rgba(0, 0, 0, 0.15); }
.service-details__heading { margin: 0; font-size: inherit; font-weight: inherit; }
.service-details__btn {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px 4px; text-align: left;
	transition: color 0.25s var(--ease-out);
}
.service-details__btn:hover { color: var(--c-cyan); }
.service-details__title { font-size: 16px; line-height: 1.4; color: inherit; }
.service-details__icon {
	position: relative; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
	background: var(--c-ice); color: var(--c-cyan);
	transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.service-details__icon::before, .service-details__icon::after {
	content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px;
	transform: translate(-50%, -50%); transition: transform 0.4s var(--ease-out), opacity 0.25s;
}
.service-details__icon::before { width: 10px; height: 1.5px; }
.service-details__icon::after { width: 1.5px; height: 10px; }
.service-details__item.is-open .service-details__icon { background: var(--c-cyan); color: var(--c-white); transform: rotate(180deg); }
.service-details__item.is-open .service-details__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.service-details__panel { height: 0; overflow: hidden; transition: height 0.45s var(--ease-out); }
.service-details__panel[hidden] { display: block; }
.service-details__list {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
	padding: 2px 4px 18px;
}
.service-details__list li {
	position: relative; padding-left: 16px;
	font-size: 14px; line-height: 1.6; color: var(--c-text-muted);
}
.service-details__list li::before {
	content: ''; position: absolute; left: 0; top: 9px;
	width: 5px; height: 5px; background: var(--c-mint);
}
@media (max-width: 700px) {
	.service-details__list { grid-template-columns: 1fr; }
	.service-details__title { font-size: 15px; }
}
