/* ==========================================================================
   Cúpula em Saúde — Rodapé "Beam Wordmark"
   Porte fiel do componente 21st.dev (Beam Wordmark Footer) para o padrão do
   projeto (WordPress + child theme), com as cores da Cúpula.

   Seção navy-meia-noite atravessada por um feixe de luz diagonal lento, com a
   marca em um wordmark gigante recortado embaixo, que a luz percorre. No topo:
   copyright sobre um fio, botões sociais "glassy" e créditos; depois colunas
   de links com rótulos sobre fios. Embaixo: o wordmark, ajustado à largura,
   uma letra por <span> — cada letra pinta o mesmo feixe/brilho do fundo,
   alinhado às coordenadas da seção, então a luz lê como um único feixe.

   Inserção: shortcode [cupula_rodape]. Edição total pelo menu "Rodapé".
   Variáveis: --cr-* (cores em hex; --cr-*-rgb / --cr-acc / --cr-lit em
   triplas R,G,B, pois entram em rgba()).
   ========================================================================== */

.cupula-rodape {
	/* Gutter único do "container": colunas e wordmark usam o mesmo, então tudo
	   alinha na mesma largura. */
	--cr-pad: clamp(20px, 5cqw, 64px);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	container-type: inline-size;
	background: var(--cr-bg);
	color: var(--cr-ink);
	font-family: var(--cr-sans, var(--cs-font-body, "Nunito Sans", sans-serif));
	-webkit-font-smoothing: antialiased;
	touch-action: pan-y;
}

/* Resets escopados (não ultrapassam as classes do componente nem as suas). */
:where(.cupula-rodape) a { color: inherit; text-decoration: none; }
:where(.cupula-rodape) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.cupula-rodape) ul { list-style: none; margin: 0; padding: 0; }
:where(.cupula-rodape) p { margin: 0; }
.cupula-rodape svg { max-width: none; display: block; }
.cupula-rodape__sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Fio superior: hairline de accent, mais forte onde o feixe o cruza. */
.cupula-rodape__rule {
	position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3;
	background: linear-gradient(90deg, rgba(var(--cr-acc), .15), rgba(var(--cr-acc), .55) var(--cr-b), rgba(var(--cr-acc), .15));
}

/* Fundo: lavagem navy, o feixe, um 2º feixe suave, o brilho do ponteiro e
   grão. Um quadro (a caixa da seção) para todos. (As "bandas" verticais da
   referência foram removidas a pedido — ficam só os demais efeitos.) */
.cupula-rodape__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cupula-rodape__wash {
	position: absolute; inset: 0;
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(var(--cr-acc), .2), transparent 55%),
		radial-gradient(90% 70% at 92% 8%, rgba(var(--cr-acc), .14), transparent 60%),
		linear-gradient(180deg, rgba(var(--cr-acc), .06), transparent 70%);
}
.cupula-rodape__beam {
	position: absolute; inset: 0;
	filter: blur(calc(1px + 1.6cqw));
	background:
		linear-gradient(var(--cr-ang), transparent calc(var(--cr-b) - 11%), rgba(var(--cr-acc), .10) calc(var(--cr-b) - 5%), rgba(var(--cr-acc), .34) var(--cr-b), rgba(var(--cr-acc), .08) calc(var(--cr-b) + 4%), transparent calc(var(--cr-b) + 9%)),
		linear-gradient(var(--cr-ang), transparent calc(var(--cr-b) - 34%), rgba(var(--cr-acc), .10) calc(var(--cr-b) - 27%), transparent calc(var(--cr-b) - 20%));
}
.cupula-rodape__glow {
	position: absolute; inset: 0; opacity: var(--cr-g);
	background: radial-gradient(circle 26cqw at var(--cr-px) var(--cr-py), rgba(var(--cr-acc), .16), transparent 70%);
}
.cupula-rodape__grain {
	position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Layout. */
.cupula-rodape__inner {
	position: relative; z-index: 2; box-sizing: border-box;
	max-width: 1120px; margin: 0 auto;
	padding: clamp(48px, 8.5cqw, 104px) var(--cr-pad) 0;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(var(--cr-ncols, 2), minmax(0, .9fr));
	column-gap: clamp(20px, 3cqw, 40px); row-gap: 44px;
}
/* Sem wordmark: fecha a seção com um respiro inferior proporcional ao topo. */
.cupula-rodape--sem-word .cupula-rodape__inner { padding-bottom: clamp(48px, 8.5cqw, 104px); }
.cupula-rodape__label {
	font-size: 12px; line-height: 1; letter-spacing: .01em;
	color: rgb(var(--cr-acc)); padding-bottom: 13px; position: relative; display: block;
}
.cupula-rodape__label::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: linear-gradient(90deg, rgba(var(--cr-acc), .55), rgba(var(--cr-acc), .28));
	transform-origin: 0 50%; transform: scaleX(var(--cr-line, 1));
	transition: transform 1.1s cubic-bezier(.2, .7, .1, 1) var(--cr-d, 0ms);
}
.cupula-rodape.is-ready[data-in='false'] .cupula-rodape__label::after { --cr-line: 0; }
.cupula-rodape__col { min-width: 0; }
.cupula-rodape__col:nth-child(1) { max-width: 420px; }
.cupula-rodape__fade {
	transition: opacity .9s ease var(--cr-d, 0ms), translate .9s cubic-bezier(.2, .7, .1, 1) var(--cr-d, 0ms);
}
.cupula-rodape.is-ready[data-in='false'] .cupula-rodape__fade { opacity: 0; translate: 0 14px; }

/* Sociais: quadrados "glassy" com a borda superior iluminada. */
.cupula-rodape__socials { display: flex; gap: 16px; margin-top: 13px; }
.cupula-rodape__soc {
	position: relative; width: 31px; height: 31px; display: grid; place-items: center;
	border-radius: 5px; color: rgba(var(--cr-ink-rgb), .62);
	background: linear-gradient(180deg, rgba(var(--cr-ink-rgb), .09), rgba(var(--cr-ink-rgb), .025));
	box-shadow: inset 0 0 0 1px rgba(var(--cr-ink-rgb), .16), inset 0 1px 0 rgba(var(--cr-ink-rgb), .14), 0 6px 14px -8px rgba(0, 0, 0, .8);
	transition: color .25s, box-shadow .35s, translate .35s cubic-bezier(.2, .8, .2, 1), background .35s;
}
.cupula-rodape__soc svg { width: 17px; height: 17px; }
.cupula-rodape__soc:hover, .cupula-rodape__soc:focus-visible {
	color: var(--cr-ink); translate: 0 -2px;
	background: linear-gradient(180deg, rgba(var(--cr-acc), .32), rgba(var(--cr-acc), .08));
	box-shadow: inset 0 0 0 1px rgba(var(--cr-acc), .75), inset 0 1px 0 rgba(var(--cr-ink-rgb), .3), 0 10px 26px -8px rgba(var(--cr-acc), .75);
}
.cupula-rodape__soc:focus-visible { outline: none; }
.cupula-rodape__tip {
	position: absolute; z-index: 5; left: 50%; top: calc(100% + 9px); translate: -50% -4px;
	white-space: nowrap; font-size: 11px; line-height: 1; padding: 6px 8px; border-radius: 4px;
	background: rgba(var(--cr-acc), .95); color: #fff; opacity: 0; pointer-events: none;
	transition: opacity .2s, translate .25s;
}
.cupula-rodape__tip::after {
	content: ''; position: absolute; left: 50%; bottom: 100%; margin-left: -4px;
	border: 4px solid transparent; border-bottom-color: rgba(var(--cr-acc), .95);
}
.cupula-rodape__soc:hover .cupula-rodape__tip, .cupula-rodape__soc:focus-visible .cupula-rodape__tip { opacity: 1; translate: -50% 0; }

/* Créditos. */
.cupula-rodape__credits { margin-top: 21px; font-size: 14px; line-height: 1.5; color: var(--cr-muted); overflow-wrap: anywhere; }
.cupula-rodape__credits p + p { margin-top: 2px; }
.cupula-rodape__credits b { font-weight: 400; color: var(--cr-ink); }
.cupula-rodape__credits a {
	color: var(--cr-ink);
	background: linear-gradient(rgb(var(--cr-acc)), rgb(var(--cr-acc))) 0 100% / 0 1px no-repeat;
	transition: background-size .35s cubic-bezier(.2, .8, .2, 1), color .25s;
}
.cupula-rodape__credits a:hover, .cupula-rodape__credits a:focus-visible { background-size: 100% 1px; color: #fff; outline: none; }

/* Colunas de links. */
.cupula-rodape__links { margin-top: 13px; display: flex; flex-direction: column; gap: 0; }
.cupula-rodape__link {
	position: relative; display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 0; font-size: 14.5px; line-height: 21px; color: rgba(var(--cr-ink-rgb), .78);
	transition: color .25s; min-width: 0; max-width: 100%;
}
.cupula-rodape__link-t { display: inline-block; min-width: 0; overflow-wrap: anywhere; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }

/* Ícone opcional antes do texto (Contato/Evento). Substitui a setinha. */
.cupula-rodape__link-ic { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; color: rgb(var(--cr-acc)); }
.cupula-rodape__link-ic svg { width: 16px; height: 16px; }
.cupula-rodape__link.has-ic::before { display: none; }
.cupula-rodape__link.has-ic:hover .cupula-rodape__link-t,
.cupula-rodape__link.has-ic:focus-visible .cupula-rodape__link-t { translate: 0; }

/* Item só de texto (sem link) — ex.: "Em breve…". Fica apagado, sem interação. */
.cupula-rodape__link--static { color: var(--cr-muted); cursor: default; align-items: flex-start; }
.cupula-rodape__link--static::before { display: none; }
.cupula-rodape__link--static:hover { color: var(--cr-muted); }
.cupula-rodape__link--static:hover .cupula-rodape__link-t { translate: 0; }

/* Coluna que contém um botão (ex.: "Baixe o e-book"). */
.cupula-rodape__col-btn { margin-top: 15px; }
.cupula-rodape__link::before {
	content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; margin-top: 0;
	background: rgb(var(--cr-acc)); transform: scaleX(0); transform-origin: 0 50%;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.cupula-rodape__link svg {
	width: 12px; height: 12px; opacity: 0; translate: -6px 0; color: rgb(var(--cr-acc));
	transition: opacity .25s, translate .35s cubic-bezier(.2, .8, .2, 1);
}
.cupula-rodape__link:hover, .cupula-rodape__link:focus-visible { color: #fff; outline: none; }
.cupula-rodape__link:hover::before, .cupula-rodape__link:focus-visible::before { transform: scaleX(1); }
.cupula-rodape__link:hover .cupula-rodape__link-t, .cupula-rodape__link:focus-visible .cupula-rodape__link-t { translate: 12px 0; }
.cupula-rodape__link:hover svg, .cupula-rodape__link:focus-visible svg { opacity: 1; translate: 10px 0; }
.cupula-rodape__link:focus-visible .cupula-rodape__link-t {
	text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--cr-acc), .8);
}

/* Organizadores: faixa de logos (em chips claros, pois são logos coloridas
   sobre fundo escuro). Ocupa a linha inteira da grade, abaixo das colunas. */
.cupula-rodape__orgs {
	grid-column: 1 / -1;
	margin-top: 8px; padding-top: 26px;
	border-top: 1px solid rgba(var(--cr-ink-rgb), .12);
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}
.cupula-rodape__orgs-label {
	font-size: 12px; letter-spacing: .01em; color: rgb(var(--cr-acc)); margin-right: 4px;
}
.cupula-rodape__orgs-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cupula-rodape__org {
	display: inline-flex; align-items: center; justify-content: center;
	height: 50px; padding: 0px 15px; border-radius: 8px;
}
.cupula-rodape__org img { height: 100%; width: auto; max-width: 180px; object-fit: contain; }

/* O wordmark. Cada letra pinta o fundo do tamanho da seção, deslocado pelo seu
   próprio offset, então feixe e brilho coincidem com o fundo. */
.cupula-rodape__word { position: relative; z-index: 1; overflow: hidden; margin-top: clamp(28px, 7cqw, 96px); }
.cupula-rodape__word-box { padding: 0 var(--cr-pad); max-width: 1120px; margin: 0 auto; box-sizing: border-box; }
.cupula-rodape__word-in {
	display: inline-flex; white-space: nowrap; font-weight: var(--cr-ww); line-height: 1;
	letter-spacing: -.02em; user-select: none; -webkit-user-select: none;
	/* Mesma fonte dos títulos do site (Anton), sem itálico. */
	font-family: var(--cr-word-font, "Anton", "Nunito Sans", Arial, sans-serif);
	font-style: normal; text-transform: uppercase;
	font-size: clamp(48px, 22cqw, 280px); /* fallback sem JS; o JS ajusta à largura */
}
.cupula-rodape__lw {
	display: inline-block; translate: 0 0;
	transition: translate 1.25s cubic-bezier(.16, .84, .2, 1) var(--cr-d, 0ms);
}
.cupula-rodape.is-ready[data-in='false'] .cupula-rodape__lw { translate: 0 85%; }
.cupula-rodape__l {
	display: inline-block; cursor: pointer; color: transparent;
	-webkit-background-clip: text; background-clip: text; background-repeat: no-repeat;
	background-size: var(--cr-rw) var(--cr-rh);
	background-position: calc(var(--cr-x) * -1) calc(var(--cr-y) * -1);
	background-image:
		radial-gradient(circle 22cqw at var(--cr-px) var(--cr-py), rgba(var(--cr-lit), calc(var(--cr-g) * .85)), transparent 70%),
		linear-gradient(var(--cr-ang), transparent calc(var(--cr-b) - 9%), rgba(var(--cr-lit), .55) calc(var(--cr-b) - 1.5%), rgba(var(--cr-lit), .7) var(--cr-b), rgba(var(--cr-lit), .2) calc(var(--cr-b) + 3.5%), transparent calc(var(--cr-b) + 8%)),
		linear-gradient(180deg, var(--cr-wt) var(--cr-top), var(--cr-wf) var(--cr-bot));
	transition: transform .5s cubic-bezier(.2, .9, .25, 1.2), filter .4s;
	transform-origin: 50% 100%;
}
.cupula-rodape__l:hover { transform: translateY(-.045em); filter: brightness(1.35) saturate(1.1); }
.cupula-rodape__l.is-hop { animation: cupula-rodape-hop .75s cubic-bezier(.2, .8, .2, 1); }
@keyframes cupula-rodape-hop {
	0% { transform: translateY(0) scale(1, 1); }
	18% { transform: translateY(.02em) scale(1.06, .9); }
	45% { transform: translateY(-.14em) scale(.97, 1.05); }
	70% { transform: translateY(.01em) scale(1.02, .97); }
	100% { transform: translateY(-.045em) scale(1, 1); }
}
/* O pé do wordmark afunda no escuro, como na referência. */
.cupula-rodape__foot {
	position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 2; pointer-events: none;
	background: linear-gradient(180deg, transparent, rgba(var(--cr-bg-rgb), .55) 55%, var(--cr-bg));
}

/* Intermediário: a coluna da marca passa para cima (largura total) e as demais
   dividem a linha igualmente, evitando espremer/sobrepor as colunas. */
@container (max-width: 1040px) {
	.cupula-rodape__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px;
	}
	.cupula-rodape__col:nth-child(1) { grid-column: 1 / -1; max-width: none; }
}
@container (max-width: 680px) {
	.cupula-rodape__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container (max-width: 440px) {
	.cupula-rodape__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.cupula-rodape .cupula-rodape__lw,
	.cupula-rodape .cupula-rodape__fade,
	.cupula-rodape .cupula-rodape__label::after,
	.cupula-rodape .cupula-rodape__l,
	.cupula-rodape .cupula-rodape__soc,
	.cupula-rodape .cupula-rodape__link-t,
	.cupula-rodape .cupula-rodape__link svg {
		transition: none !important; animation: none !important;
	}
	.cupula-rodape.is-ready[data-in='false'] .cupula-rodape__lw,
	.cupula-rodape.is-ready[data-in='false'] .cupula-rodape__fade { translate: none; opacity: 1; }
	.cupula-rodape.is-ready[data-in='false'] .cupula-rodape__label::after { --cr-line: 1; }
}

/* ==========================================================================
   Utilitário .fundo-rodape — MESMO fundo animado do rodapé, reutilizável.
   O JS (rodape.js) injeta as camadas .cupula-rodape__sky/__rule e anima o feixe
   e o brilho exatamente como no rodapé. Antes do JS (ou sem JS), um feixe
   estático de fallback é desenhado via ::before.
   Cole a classe "fundo-rodape" em uma Seção/Container/footer do Elementor.
   ========================================================================== */
.fundo-rodape {
	/* Mesmas variáveis do rodapé (edite se precisar). */
	--cr-bg: #01032a;
	--cr-bg-rgb: 1, 3, 42;
	--cr-acc: 0, 160, 204;
	--cr-ang: 118deg;
	--cr-b: 58%;
	--cr-px: 50%;
	--cr-py: 50%;
	--cr-g: 0;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	container-type: inline-size;
	background-color: var(--cr-bg);
}
/* Conteúdo acima do fundo (exceto as camadas injetadas pelo JS). */
.fundo-rodape > :not(.cupula-rodape__sky):not(.cupula-rodape__rule) { position: relative; z-index: 1; }
/* Base navy garantida sobre um eventual fundo próprio do Elementor. */
.fundo-rodape .cupula-rodape__sky { background-color: var(--cr-bg); }

/* Fallback sem JS: feixe estático (some quando o JS injeta a "sky" animada). */
.fundo-rodape:not(.is-ready)::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	filter: blur(calc(1px + 1.6cqw));
	background:
		linear-gradient(var(--cr-ang), transparent calc(var(--cr-b) - 11%), rgba(var(--cr-acc), .10) calc(var(--cr-b) - 5%), rgba(var(--cr-acc), .34) var(--cr-b), rgba(var(--cr-acc), .08) calc(var(--cr-b) + 4%), transparent calc(var(--cr-b) + 9%)),
		linear-gradient(var(--cr-ang), transparent calc(var(--cr-b) - 34%), rgba(var(--cr-acc), .10) calc(var(--cr-b) - 27%), transparent calc(var(--cr-b) - 20%));
}
.fundo-rodape:not(.is-ready)::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(var(--cr-acc), .2), transparent 55%),
		radial-gradient(90% 70% at 92% 8%, rgba(var(--cr-acc), .14), transparent 60%);
}