/*
Theme Name:   Opus Hello Child
Description:  Tema filho do Hello Elementor para a Opus Brasil. Contém só o CSS que o Kit do Elementor não cobre.
Template:     hello-elementor
Version:      1.0.0
Requires PHP: 8.1
Text Domain:  opus-hello-child
License:      GPL-2.0-or-later
*/

/* ==========================================================================
   Fontes: as @font-face vêm do Custom Fonts do Elementor Pro (cadastradas
   como "Inter Tight" (títulos) e "IBM Plex Sans" (texto). Os arquivos
   WOFF2 ficam em /fonts, com as licenças OFL. A Archivo SemiExpanded
   continua cadastrada, mas não é mais usada nos títulos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Containers internos sem padding padrão
   O Kit define o padding lateral (32/24/16 px) para todos os containers.
   Só o container de fora da seção deve recebê-lo; os internos começam em 0.
   -------------------------------------------------------------------------- */
.elementor .e-con.e-child {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
}

/* --------------------------------------------------------------------------
   1. Foco de teclado
   Contorno azul vivo (#2A62EE) de 3 px com anel interno branco de 2 px.
   O azul tem 4,4:1 sobre o branco; sobre o azul escuro do hero o anel
   branco garante o contraste de 3:1 (WCAG 2.2, 1.4.11). Antes era amarelo.
   -------------------------------------------------------------------------- */
/* !important: os widgets do Elementor trazem focos próprios (contorno preto
   no Mega Menu, por exemplo); o site precisa de um foco único. */
:where(a, button, input, select, textarea, summary, [tabindex], .elementor-button):focus-visible {
	outline: 3px solid var(--opus-azul-vivo, #2A62EE) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

:where(a, button, input, select, textarea, summary, [tabindex], .elementor-button):focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   2. Links de texto corrido
   A cor vem do Kit; aqui só o desenho do sublinhado.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor a,
.elementor-widget-icon-list .elementor-icon-list-text a,
.opus-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.elementor-widget-text-editor a:hover,
.opus-link:hover {
	text-decoration-thickness: 2px;
}

/* Texto corrido nunca justificado e com medida de leitura. */
.elementor-widget-text-editor {
	text-align: start;
}

/* O espaço entre blocos vem do container; o último parágrafo e a última
   lista de cada bloco de texto não somam margem extra. */
.elementor-widget-text-editor > :last-child,
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor ul {
	margin-top: 0;
	padding-left: 1.25em;
}

.elementor-widget-text-editor li + li {
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   3. Moldura de cantos (.opus-moldura)
   Dois "L" em cinza moldura, como no símbolo da logo. Aplicar pelo campo
   "Classes CSS" do container. Uma por página.
   -------------------------------------------------------------------------- */
.opus-moldura {
	--opus-moldura-braco: 32px;
	--opus-moldura-afastamento: 12px;
	--opus-moldura-traco: 2px;
	position: relative;
}

.opus-moldura::before,
.opus-moldura::after {
	content: "";
	position: absolute;
	width: var(--opus-moldura-braco);
	height: var(--opus-moldura-braco);
	border: 0 solid var(--e-global-color-opusmoldura, #BDBEC0);
	pointer-events: none;
}

.opus-moldura::before {
	top: calc(var(--opus-moldura-afastamento) * -1);
	left: calc(var(--opus-moldura-afastamento) * -1);
	border-top-width: var(--opus-moldura-traco);
	border-left-width: var(--opus-moldura-traco);
}

.opus-moldura::after {
	right: calc(var(--opus-moldura-afastamento) * -1);
	bottom: calc(var(--opus-moldura-afastamento) * -1);
	border-right-width: var(--opus-moldura-traco);
	border-bottom-width: var(--opus-moldura-traco);
}

@media (max-width: 767px) {
	.opus-moldura {
		--opus-moldura-braco: 24px;
		--opus-moldura-afastamento: 8px;
	}
}

/* --------------------------------------------------------------------------
   4. Lista de serviços (.opus-lista-item)
   Linha inteira clicável, separada por fio cinza moldura. No hover e no
   foco, o fio passa a azul Opus e o nome ganha sublinhado.
   -------------------------------------------------------------------------- */
.opus-lista-item {
	border-top: 1px solid var(--e-global-color-opusmoldura, #BDBEC0);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.opus-lista-item:hover,
.opus-lista-item:focus-visible {
	border-top-color: var(--e-global-color-primary, #292C97);
}

.opus-lista-item:hover .opus-lista-nome .elementor-heading-title,
.opus-lista-item:focus-visible .opus-lista-nome .elementor-heading-title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.opus-lista-fim {
	border-top: 1px solid var(--e-global-color-opusmoldura, #BDBEC0);
}

/* Nomes longos quebram linha dentro da coluna em vez de vazar. */
.opus-lista-item > .elementor-widget,
.opus-lista-item > .e-con {
	min-width: 0;
}

.opus-mega-painel .e-grid > .e-con-inner,
.opus-mega-painel .e-grid {
	min-width: 0;
}

/* Links em linha (home): alvo de toque de pelo menos 24 px (WCAG 2.2, 2.5.8). */
.opus-links .elementor-icon-list-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* Alvo do link "Ir para o conteúdo". */
#content:focus {
	outline: none;
}

/* Versão compacta, usada no mega menu. */
.opus-lista-item--compacta {
	min-height: 44px;
}

/* --------------------------------------------------------------------------
   4b. Alvos de toque de 44 × 44 px para ícones com link (telefone no
   header do celular, WhatsApp flutuante).
   -------------------------------------------------------------------------- */
.opus-alvo-44 .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* --------------------------------------------------------------------------
   5. Selo de norma (.opus-selo)
   Os algarismos da IBM Plex Sans já são tabulares; a regra garante o mesmo
   resultado se a fonte mudar.
   -------------------------------------------------------------------------- */
.opus-selo .elementor-heading-title {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6. Header fixo
   Ao rolar, o Elementor Pro adiciona .elementor-sticky--effects ao header.
   Altura reduzida e a única sombra do site.
   -------------------------------------------------------------------------- */
.opus-header {
	transition: box-shadow 0.2s ease, min-height 0.2s ease, padding 0.2s ease;
}

.opus-header.elementor-sticky--effects {
	box-shadow: 0 1px 0 var(--e-global-color-opusmoldura, #BDBEC0), 0 4px 12px rgba(28, 29, 91, 0.08);
	--padding-top: 8px;
	--padding-bottom: 8px;
}

.opus-header .opus-header-logo img {
	transition: width 0.2s ease;
}

.opus-header.elementor-sticky--effects .opus-header-logo img {
	width: 150px;
}

/* --------------------------------------------------------------------------
   7. Mega menu
   Painel com borda superior azul Opus; sem sombra pesada.
   -------------------------------------------------------------------------- */
.opus-header .e-n-menu-content > .e-con {
	border-top: 2px solid var(--e-global-color-primary, #292C97);
	border-bottom: 1px solid var(--e-global-color-opusmoldura, #BDBEC0);
}

/* Botões de abrir e fechar área do mega menu: alvo de 24 × 24 px no mínimo
   (WCAG 2.2, 2.5.8). O ícone continua com 16 px. */
.opus-header .e-n-menu-dropdown-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

/* --------------------------------------------------------------------------
   8. Botão flutuante de WhatsApp (só no celular)
   Reserva espaço no fim da página para não cobrir o CTA final nem o
   aviso de cookies.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body {
		padding-bottom: 88px;
	}
}

/* Azuis da paleta escura (hero e Como funciona). */
:root {
	--opus-azul-vivo: #2A62EE;
	--opus-azul-brilho: #4B86FF;
	--opus-lavanda: #C9CDF2;
}

/* --------------------------------------------------------------------------
   8b. Hero escuro da home (.opus-hero-escuro)
   Fundo azul profundo com brilho e arcos decorativos; H1 com a última
   palavra em degradê; cartão de foto com selos flutuantes.
   -------------------------------------------------------------------------- */
.opus-hero-escuro {
	/* Paleta azul única (hero e Como funciona): vivo para ação, brilho para destaque. */
	--hero-ciano: var(--opus-azul-brilho);
	--hero-azul: var(--opus-azul-vivo);
	--hero-txt-suave: rgba(226, 230, 255, 0.82);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(60% 70% at 85% 10%, rgba(76, 64, 220, 0.45) 0%, transparent 60%),
		radial-gradient(50% 60% at 10% 100%, rgba(40, 60, 200, 0.25) 0%, transparent 60%),
		linear-gradient(120deg, #15124F 0%, #1C1D5B 45%, #2A2390 100%);
	color: #fff;
}

/* Arcos finos no canto direito. */
.opus-hero-escuro::before,
.opus-hero-escuro::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	border: 1px solid rgba(140, 150, 255, 0.18);
	pointer-events: none;
}

.opus-hero-escuro::before {
	width: 1100px;
	height: 1100px;
	top: -520px;
	right: -560px;
}

.opus-hero-escuro::after {
	width: 1500px;
	height: 1500px;
	top: -760px;
	right: -820px;
}

.opus-hero-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	color: var(--opus-lavanda);
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.opus-hero-eyebrow .elementor-heading-title::before {
	content: "";
	width: 30px;
	height: 2px;
	background: var(--opus-azul-brilho);
}

.opus-hero-h1 .elementor-heading-title {
	margin: 0;
	color: #fff;
	font-family: "Inter Tight", "IBM Plex Sans", sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 3.7vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.opus-hero-destaque {
	color: var(--opus-azul-brilho);
	text-shadow: 0 0 28px rgba(75, 134, 255, 0.55);
}

.opus-hero-lead {
	margin-top: 20px;
	max-width: 600px;
	color: var(--hero-txt-suave);
	font-size: 18px;
	line-height: 1.65;
}

.opus-hero-botoes {
	margin-top: 32px;
}

.opus-hero-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 30px;
	border-radius: 999px;
	font-family: "Inter Tight", "IBM Plex Sans", sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.opus-hero-btn--primario .elementor-button {
	background: var(--opus-azul-vivo);
	color: #fff;
	box-shadow: 0 14px 30px -10px rgba(47, 107, 255, 0.7);
}

.opus-hero-btn--primario .elementor-button::after {
	content: "\2192";
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 500;
	transition: transform 0.15s ease;
}

.opus-hero-btn--primario .elementor-button:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 18px 36px -10px rgba(47, 107, 255, 0.85);
}

.opus-hero-btn--primario .elementor-button:hover::after {
	transform: translateX(3px);
}

.opus-hero-btn--vidro .elementor-button {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	backdrop-filter: blur(6px);
}

.opus-hero-btn--vidro .elementor-button:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.opus-hero-checks {
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.opus-hero-checks .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}

.opus-hero-checks .elementor-icon-list-item {
	margin: 0 !important;
	padding: 0 !important;
}

.opus-hero-checks .elementor-icon-list-item::after {
	display: none !important;
}

.opus-hero-checks .elementor-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: 12px;
	border-radius: 50%;
	background: rgba(75, 134, 255, 0.16);
}

.opus-hero-checks .elementor-icon-list-icon i,
.opus-hero-checks .elementor-icon-list-icon svg {
	color: var(--hero-ciano);
	fill: var(--hero-ciano);
	font-size: 11px;
	width: 11px;
	height: 11px;
}

.opus-hero-checks .elementor-icon-list-text {
	color: #fff;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
}

/* Cartão de foto e selos. */
.opus-hero-visual {
	position: relative;
	padding: 0 24px 0 0;
}

.opus-hero-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: clamp(380px, 34vw, 500px);
	padding: 40px 32px;
	border-radius: 32px;
	border: 1px solid rgba(140, 150, 255, 0.22);
	background:
		radial-gradient(80% 60% at 70% 30%, rgba(60, 110, 255, 0.35) 0%, transparent 70%),
		linear-gradient(160deg, #1E3AA8 0%, #1A2380 55%, #1A1A66 100%);
	box-shadow: 0 40px 80px -30px rgba(5, 5, 40, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	text-align: center;
}

.opus-hero-card__icone {
	color: var(--hero-ciano);
	margin-bottom: 18px;
}

.opus-hero-card__titulo {
	margin: 0;
	color: #fff;
	font-family: "Inter Tight", "IBM Plex Sans", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.opus-hero-card__texto {
	max-width: 340px;
	margin: 0;
	color: var(--hero-txt-suave);
	font-size: 15px;
	line-height: 1.7;
}

.opus-hero-selo {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px 16px 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 48px -16px rgba(5, 5, 40, 0.55);
	color: #1C1D5B;
}

.opus-hero-selo--topo {
	top: 28px;
	right: 0;
}

.opus-hero-selo--base {
	bottom: 36px;
	left: -32px;
}

.opus-hero-selo__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--opus-azul-vivo);
	color: #fff;
	font-family: "Inter Tight", "IBM Plex Sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.opus-hero-selo__txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	line-height: 1.35;
	color: #5A5C7A;
}

.opus-hero-selo__txt strong {
	color: #1C1D5B;
	font-family: "Inter Tight", "IBM Plex Sans", sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

@media (max-width: 1024px) {
	.opus-hero-visual {
		max-width: 520px;
		margin: 0 auto;
		width: 100%;
	}

	.opus-hero-selo--base {
		left: -12px;
	}
}

@media (max-width: 767px) {
	.opus-hero-lead {
		font-size: 17px;
		margin-top: 20px;
	}

	.opus-hero-botoes {
		margin-top: 28px;
	}

	.opus-hero-btn .elementor-button {
		width: 100%;
		justify-content: center;
		min-height: 56px;
	}

	.opus-hero-checks {
		margin-top: 36px;
	}

	.opus-hero-visual {
		padding: 0;
	}

	.opus-hero-card {
		height: 260px;
		border-radius: 24px;
	}

	.opus-hero-selo {
		padding: 12px 16px 12px 12px;
		gap: 12px;
	}

	.opus-hero-selo--topo {
		top: 16px;
		right: -6px;
	}

	.opus-hero-selo--base {
		left: -6px;
		bottom: 16px;
	}

	.opus-hero-selo__marca {
		width: 40px;
		height: 40px;
		font-size: 15px;
	}

	.opus-hero-selo__txt strong {
		font-size: 15px;
	}
}

/* --------------------------------------------------------------------------
   9. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}