/* Cola entre o CSS do design (site.css) e o WordPress/Elementor.
   Tudo o que não existia no estático mora aqui, para o site.css continuar
   a ser um espelho do Figma. */

/* O Elementor embrulha cada widget: os embrulhos não podem criar caixa nova,
   senão as secções deixam de encostar umas nas outras como no design. */
.elementor-widget-concretiza-hero .elementor-widget-container,
.elementor-widget-concretiza-sobre .elementor-widget-container,
.elementor-widget-concretiza-processo .elementor-widget-container,
.elementor-widget-concretiza-servicos .elementor-widget-container,
.elementor-widget-concretiza-portfolio .elementor-widget-container,
.elementor-widget-concretiza-depoimentos .elementor-widget-container,
.elementor-widget-concretiza-faq .elementor-widget-container,
.elementor-widget-concretiza-cta .elementor-widget-container,
.elementor-widget-concretiza-time .elementor-widget-container,
.elementor-widget-concretiza-servico-detalhe .elementor-widget-container,
.elementor-widget-concretiza-diferenciais .elementor-widget-container,
.elementor-widget-concretiza-pfcarrossel .elementor-widget-container,
.elementor-widget-concretiza-projecto .elementor-widget-container,
.elementor-widget-concretiza-formulario .elementor-widget-container,
.elementor-widget-concretiza-contactcards .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* O site.css zera as margens com `*`, que tem especificidade 0 e por isso
   perde para o reset do Hello Elementor (`p`, `h1`... valem mais que `*`).
   Aqui repõe-se o zero com especificidade de classe, sem tocar no resto do
   WordPress: só dentro dos widgets da Concretiza, da topbar e do rodapé. */
[class*="elementor-widget-concretiza-"] :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, hr, blockquote, dl, dd),
.topbar :where(p, ul, li),
.footer :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, hr) {
  margin: 0;
  padding: 0;
}

/* O mesmo para o list-style, que o Hello devolve às listas. */
[class*="elementor-widget-concretiza-"] :where(ul, ol),
.topbar :where(ul),
.footer :where(ul, ol) {
  list-style: none;
}

/* Páginas montadas com estes widgets são sempre de largura total. */
.concretiza-page .elementor-section > .elementor-container,
.concretiza-page .e-con-inner {
  max-width: none;
  padding: 0;
}

/* Avisos do formulário (o estático não tinha envio). */
.jobs__aviso {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

.jobs__aviso--ok {
  background: rgba(6, 38, 169, .08);
  border: 1px solid var(--azul);
  color: var(--azul);
}

.jobs__aviso--erro {
  background: rgba(200, 30, 30, .08);
  border: 1px solid #c81e1e;
  color: #c81e1e;
}

/* ---------------------------------------------------------
   Animações de entrada
   ---------------------------------------------------------
   Só actuam depois de o JS marcar o <html> com .cz-anim. Se o JS falhar ou
   estiver desligado, o conteúdo aparece normalmente. A transição vive na
   classe de chegada para o elemento nunca desaparecer de volta. */

@media (prefers-reduced-motion: no-preference) {
	html.cz-anim .cz-reveal {
		opacity: 0;
		transform: translateY(20px);
	}

	html.cz-anim .cz-reveal.cz-in {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--cz-delay, 0ms),
			transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--cz-delay, 0ms);
	}

	/* Elementos que já vivem centrados por transform não podem ser deslocados:
	   entram só com opacidade. */
	html.cz-anim .cz-reveal.cz-reveal--fade {
		transform: none;
	}
}

/* ---------------------------------------------------------
   Nosso time: o nome entra por baixo da fotografia
   ---------------------------------------------------------
   A moldura é uma grelha de duas linhas dentro da mesma caixa: a fotografia
   ocupa tudo em repouso (segunda linha a 0fr) e encolhe no hover para dar
   lugar ao cartão. Como a caixa exterior não muda de tamanho, nada salta na
   página e o nome nunca fica por cima da fotografia. */

.time__photo {
	--cz-subida: 40px;
	--cz-intervalo: 10px;

	position: relative;
	overflow: visible;
	background: none;
}

/* A fotografia mantém o tamanho e sobe: encolher recortava a pessoa. */
.time__photo img {
	border-radius: var(--radius);
	background: #dbdbdb;
	transition: transform 0.35s ease;
}

.time__photo:hover img,
.time__photo:focus-within img,
.time__photo:focus-visible img {
	transform: translateY(calc(var(--cz-subida) * -1));
}

/* O cartão ocupa o espaço que a fotografia deixou ao subir: fica sempre
   abaixo dela, nunca por cima. Como é absoluto, não empurra a página. */
.time__name {
	top: calc(100% - var(--cz-subida) + var(--cz-intervalo));
	bottom: auto;
	padding: 14px;
	transform: none;
	opacity: 0;
	transition: opacity 0.25s ease 0.05s;
}

.time__photo:hover .time__name,
.time__photo:focus-within .time__name,
.time__photo:focus-visible .time__name {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.time__name {
		top: calc(100% + var(--cz-intervalo));
		opacity: 1;
	}
}

/* Sem hover (ecrãs de toque) o cartão fica sempre à vista. */
@media (hover: none) {
	.time__photo {
		grid-template-rows: 1fr auto;
		gap: 10px;
	}

	.time__name {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.time__photo,
	.time__name {
		transition: none;
	}
}

/* ---------------------------------------------------------
   FAQ: a coluna de texto centrada em relação à lista
   --------------------------------------------------------- */

.faq__inner {
	align-items: center;
}

/* A barra de administração empurra a página 32px para baixo e a topbar é
   absoluta: sem isto, fica por baixo dela quando há sessão iniciada. */
body.admin-bar .topbar {
  top: 40px;
}

@media (max-width: 782px) {
  body.admin-bar .topbar {
    top: 54px;
  }
}

/* No editor do Elementor não há barra de administração dentro do iframe. */
.elementor-editor-active .topbar {
  top: 8px;
}