/* Juffer: o mínimo que o Elementor não faz pelo painel. Cores e fontes ficam em Site Settings. */

html, body { overflow-x: clip; }

/* Anel de foco: tinta sobre creme, branco sobre grafite e vermelho */
a:focus-visible,
.elementor-button:focus-visible,
.elementor-menu-toggle:focus-visible {
	outline: 2px solid #221109;
	outline-offset: 3px;
}
.elementor-element[data-settings*="background_background"] a:focus-visible,
.juffer-painel a:focus-visible,
.juffer-servico a:focus-visible { outline-color: #ffffff; }

/* Título do hero: o círculo desenhado não quebra linha no meio da palavra */
.juffer-hero-titulo .elementor-headline-dynamic-wrapper { white-space: nowrap; }

/* Âncoras não ficam escondidas atrás do header fixo */
[id] { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Botão de WhatsApp fixo no mobile.
   No Elementor: widget Botão com a classe "juffer-whats-fixo" (Avançado → Classes CSS),
   visível só no mobile (Avançado → Responsivo). Texto e link são editados no próprio widget. */
@media (max-width: 767px) {
	.juffer-whats-fixo {
		position: fixed !important;
		left: 16px;
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: auto !important;
		z-index: 999;
		margin: 0 !important;
	}
	.juffer-whats-fixo .elementor-button { width: 100%; justify-content: center; }
	body.juffer-tem-whats { padding-bottom: 88px; }
}

/* Painel do CTA: textos e botão ficam acima da marca d'água do logo */
.juffer-painel > .e-con { position: relative; z-index: 1; }

/* Regra de marca: palavra entre <em> num Título vira itálico vermelho.
   No Elementor, basta escrever: O QUE A <em>JUFFER</em> FAZ */
.elementor-heading-title em { font-style: italic; color: #C53616; }
.juffer-painel .elementor-heading-title em { color: #FFFFFF; }

/* Lista de serviços: movimento suave no hover */
.juffer-servico { transition: padding .35s ease, background-color .35s ease; }
.juffer-servico .elementor-heading-title { transition: color .35s ease; }
@media (hover: hover) and (min-width: 768px) {
	.juffer-servico:hover { padding-left: 16px !important; }
	.juffer-servico:hover h3.elementor-heading-title { color: #C53616; }
}

/* Link com seta: a seta anda no hover */
.juffer-link-seta .elementor-button-icon { transition: transform .3s ease; }
.juffer-link-seta:hover .elementor-button-icon { transform: translateX(6px); }
.juffer-link-seta .elementor-button-text { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* Quem prefere menos movimento não vê animações de entrada */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible { visibility: visible !important; }
	.animated { animation: none !important; }
	.juffer-servico, .juffer-servico .elementor-heading-title { transition: none; }
}

/* Faixa de segmentos em movimento contínuo.
   No widget Título, escreva a lista DUAS vezes seguidas (o texto se repete para o loop ficar contínuo). */
.juffer-faixa { overflow: hidden; }
.juffer-marquee { width: max-content !important; max-width: none !important; }
.juffer-marquee .elementor-heading-title {
	display: inline-block;
	white-space: nowrap;
	animation: juffer-marquee 45s linear infinite;
}
.juffer-faixa:hover .juffer-marquee .elementor-heading-title { animation-play-state: paused; }
@keyframes juffer-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Projetos: a imagem aproxima de leve no hover */
.juffer-projeto .elementor-widget-image { overflow: hidden; border-radius: 4px; }
.juffer-projeto img { transition: transform .6s ease; }
@media (hover: hover) { .juffer-projeto:hover img { transform: scale(1.04); } }
.juffer-projeto h3.elementor-heading-title { transition: color .35s ease; }
.juffer-projeto:hover h3.elementor-heading-title { color: #C53616; }

/* Footer: a palavra em <em> fica pêssego sobre o grafite */
.juffer-footer .elementor-heading-title em { color: #E28D68; }

@media (prefers-reduced-motion: reduce) {
	.juffer-marquee .elementor-heading-title { animation: none; }
	.juffer-projeto img { transition: none; }
}

/* Portfólio: imagens sempre quadradas, qualquer que seja o arquivo enviado */
.juffer-projeto .elementor-widget-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* Card-convite no fim da grade: quadrado, texto em cima e link embaixo */
.juffer-projeto-cta { aspect-ratio: 1 / 1; }
.juffer-projeto-cta .elementor-heading-title em { color: #221109; }
.juffer-projeto-cta .juffer-link-seta .elementor-button { padding-left: 0; padding-right: 0; }
@media (max-width: 767px) { .juffer-projeto-cta { aspect-ratio: auto; min-height: 100%; } }

/* Carrossel de projeto (ex.: Ponto a Ponto): slides quadrados como os outros cards */
.juffer-carrossel { overflow: hidden; border-radius: 4px; }
.juffer-carrossel .swiper-slide-image, .juffer-carrossel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }