/* =========================================================================
   Ponte entre a estrutura do Elementor e o design system do Baby InseminA

   O Elementor envolve todo conteúdo em três camadas:

     section.elementor-section
       └ div.elementor-container      (limita a largura)
         └ div.elementor-column       (recebe .container do projeto)
           └ div.elementor-widget-wrap
             └ div.elementor-element  (um por widget)

   O CSS original foi escrito para pai > filho direto. Este arquivo desmonta ou
   neutraliza as camadas intermediárias para que o layout saia idêntico ao do
   site estático, sem reescrever a folha principal.
   ========================================================================= */

/* ---------- Neutralizações gerais ---------------------------------------- */

/* O .elementor-container não deve limitar largura: quem faz isso é o
   .container do projeto, aplicado na coluna. */
.elementor-section > .elementor-container { max-width: none; width: 100%; }

/* O recuo de 10px que o Elementor põe em toda coluna competiria com o
   --gutter do projeto. */
.elementor-widget-wrap { padding: 0 !important; }

/* Widgets não carregam margem inferior própria: o ritmo vem do design system. */
.elementor-widget:not(:last-child) { margin-bottom: 0; }

/* A coluna é um item flex do container; precisa poder ocupar a linha toda. */
.elementor-section > .elementor-container > .elementor-column { width: 100%; }

/* ---------- Contexto de posicionamento ----------------------------------- */

/* Peças posicionadas de forma absoluta (foto sangrada do hero, halos de fundo,
   selos) precisam se ancorar na SEÇÃO, não nas camadas do Elementor. Tirar o
   position:relative delas devolve a âncora correta. */
.hero > .elementor-container,
.hero > .elementor-container > .elementor-column,
.hero > .elementor-container > .elementor-column > .elementor-widget-wrap,
.hero .elementor-widget-html,
.tem-fundo > .elementor-container,
.tem-fundo > .elementor-container > .elementor-column,
.tem-fundo > .elementor-container > .elementor-column > .elementor-widget-wrap,
.tem-fundo > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-html {
	position: static;
}

/* A camada decorativa entra por um widget HTML, mas precisa cobrir a seção
   inteira e ficar atrás do conteúdo. */
.tem-fundo .elementor-widget-html > .elementor-widget-container { position: static; }
.elementor-section.tem-fundo > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:not(.elementor-widget-html) { position: relative; z-index: 1; }

/* ---------- Coluna de texto do hero -------------------------------------- */

/* No HTML original havia um .hero__texto-col entre o container e os textos.
   Aqui esse papel é do próprio wrap de widgets. */
.hero__conteudo > .elementor-widget-wrap { max-width: 41rem; }

/* A cascata de entrada anima os filhos de .cascata. Com o Elementor no meio,
   os filhos reais são os widgets dentro do wrap. */
.js .cascata > .elementor-widget-wrap > * { opacity: 0; transform: translateY(22px); }
.js .cascata.is-visivel > .elementor-widget-wrap > * { animation: entra 800ms var(--ease) forwards; }
.js .cascata.is-visivel > .elementor-widget-wrap > *:nth-child(1) { animation-delay: 80ms; }
.js .cascata.is-visivel > .elementor-widget-wrap > *:nth-child(2) { animation-delay: 180ms; }
.js .cascata.is-visivel > .elementor-widget-wrap > *:nth-child(3) { animation-delay: 280ms; }
.js .cascata.is-visivel > .elementor-widget-wrap > *:nth-child(4) { animation-delay: 380ms; }
.js .cascata.is-visivel > .elementor-widget-wrap > *:nth-child(5) { animation-delay: 470ms; }
.js .cascata.is-visivel > .elementor-widget-wrap > *:nth-child(6) { animation-delay: 550ms; }

/* ---------- Componentes em grade ----------------------------------------- */

/* Quando a classe de grade cai numa seção interna, as camadas do Elementor
   somem da árvore de caixas com display:contents e as colunas viram itens da
   grade — que é exatamente o que o CSS original espera. */
.elementor-section.impacto > .elementor-container,
.elementor-section.apoio-grade > .elementor-container,
.elementor-section.passos > .elementor-container,
.elementor-section.cta-foto > .elementor-container,
.elementor-section.manifesto__pilares > .elementor-container,
.elementor-section.linha-tempo__lista > .elementor-container { display: contents; }

/* As colunas que viram itens de grade não podem manter largura percentual. */
.impacto > .elementor-container > .elementor-column,
.apoio-grade > .elementor-container > .elementor-column,
.passos > .elementor-container > .elementor-column,
.cta-foto > .elementor-container > .elementor-column,
.manifesto__pilares > .elementor-container > .elementor-column { width: auto; }

/* ---------- Tipografia: devolver as fontes da marca ---------------------- */

/* O kit do Elementor declara .elementor-kit-N h1 { font-family: Roboto }, com
   especificidade maior que a regra de elemento do design system. Sem este
   reforço, todo título do site sai em Roboto. O prefixo `body` sobe a
   especificidade sem recorrer a !important, e o painel de Fontes Globais
   continua funcionando para quem quiser trocar a paleta tipográfica. */
/* A regra do Elementor é `.elementor-widget-heading .elementor-heading-title`,
   ou seja DUAS classes. Como classe pesa mais que elemento na especificidade,
   prefixar com `body` não basta: é preciso casar a tag JUNTO da classe do
   título para chegar a (0,2,2) e vencer. */

/* títulos de verdade: serifada */
body .elementor h1, body .elementor h2, body .elementor h3,
body .elementor h4, body .elementor h5, body .elementor h6,
body .elementor h1.elementor-heading-title,
body .elementor h2.elementor-heading-title,
body .elementor h3.elementor-heading-title,
body .elementor h4.elementor-heading-title,
body .elementor h5.elementor-heading-title,
body .elementor h6.elementor-heading-title { font-family: var(--fonte-display); }

/* O mesmo widget também gera <p>, <span> e <div> — olho, selos, etiquetas.
   Esses são texto de apoio e vão na fonte de corpo. */
body .elementor p.elementor-heading-title,
body .elementor span.elementor-heading-title,
body .elementor div.elementor-heading-title,
body .elementor p,
body .elementor li,
body .elementor .elementor-widget-text-editor { font-family: var(--fonte-corpo); }

/* A paleta global do Elementor pinta todo título e texto de widget, apagando as
   cores do design system (o olho ficava azul-claro, o rótulo cinza genérico).
   Fazendo o elemento interno herdar, quem manda volta a ser a classe aplicada
   no bloco — e, na falta dela, a cor da própria seção. */
body .elementor .elementor-widget-heading .elementor-heading-title { color: inherit; }
/* No editor de texto a herança vai no contêiner interno, não no bloco: o bloco
   é quem carrega a classe do design system e precisa manter a própria cor. */
body .elementor .elementor-widget-text-editor > .elementor-widget-container { color: inherit; }

/* Texto de apoio: o design system usa --tinta-suave, mas a cor global do
   Elementor tem a mesma especificidade e vencia por vir depois. */
body .elementor .elementor-widget.chamada,
body .elementor .elementor-widget.hero__apoio,
body .elementor .elementor-widget.hero__nota,
body .elementor .elementor-widget.impacto__rotulo,
body .elementor .elementor-widget.marco__resumo,
body .elementor .elementor-widget.campo__ajuda,
body .elementor .elementor-widget.qrcode__aviso,
body .elementor .elementor-widget.composicao__legenda,
body .elementor .elementor-widget.legenda-foto,
body .elementor .elementor-widget.texto-peq { color: var(--tinta-suave); }

/* nas faixas escuras o texto de apoio clareia, como no original */
body .elementor .secao--fundo .elementor-widget.chamada { color: #bfe3ea; }

/* Peças que o design system quer na display mesmo não sendo título */
body .elementor .impacto__num,
body .elementor .impacto__num .elementor-heading-title,
body .elementor .marco__ano,
body .elementor .marco__ano .elementor-heading-title,
body .elementor .passo__num,
body .elementor .passo__num .elementor-heading-title,
body .elementor .manifesto__texto,
body .elementor .manifesto__texto .elementor-heading-title,
body .elementor .composicao__selo__num,
body .elementor .composicao__selo__num .elementor-heading-title,
body .elementor .depoimento blockquote,
body .elementor .depoimentos-projeto .elementor-testimonial__text,
body .elementor .topo-pagina__ano,
body .elementor .topo-pagina__ano .elementor-heading-title { font-family: var(--fonte-display); }

/* ---------- Hero: título e foto sangrada --------------------------------- */

/* O h1 do hero é menor que o --t-h1 padrão: a chamada precisa caber na
   primeira tela junto com os botões. */
/* `body` na frente para vencer a regra geral de margem dos títulos, que tem
   especificidade maior por causa do :not(:last-child). */
body .elementor .hero .elementor-widget-heading h1 {
	font-size: clamp(2.35rem, 4.1vw + .55rem, 3.85rem);
	margin-bottom: .45em;
}
.hero .elementor-widget-heading h1 em { font-style: normal; color: var(--turquesa-escuro); }

/* Qualquer transform, mesmo o de identidade que sobra da animação em cascata,
   cria bloco de contenção e faria a foto sangrada se ancorar no widget em vez
   da seção. Por isso a foto fica de fora da cascata. */
.hero .elementor-widget-wrap,
.hero .elementor-widget-html {
	transform: none !important;
	animation: none !important;
	opacity: 1 !important;
}

/* Espaçamento entre os blocos do hero, que no HTML original vinha das margens
   dos próprios elementos. */
.hero__conteudo .elementor-widget-text-editor.hero__apoio { margin-bottom: var(--e4); }
.hero__conteudo .elementor-widget-html + .elementor-widget-text-editor.hero__nota { margin-top: var(--e3); }

/* O Elementor força line-height: 1 em todo título. Isso faz as duas linhas do
   olho se sobreporem no celular e descarta a entrelinha que o design system
   definiu para cada nível de título. */
body .elementor .elementor-heading-title { line-height: inherit; }
body .elementor h1.elementor-heading-title { line-height: 1.02; }
body .elementor h2.elementor-heading-title { line-height: 1.06; }
body .elementor h3.elementor-heading-title { line-height: 1.18; }
body .elementor h4.elementor-heading-title { line-height: 1.3; }

/* ---------- Ritmo vertical ----------------------------------------------- */

/* O Elementor aplica .elementor-heading-title { margin: 0 }, com especificidade
   maior que as regras de elemento do design system. Sem isto os títulos colam
   no parágrafo seguinte. */
body .elementor .elementor-widget-heading:not(:last-child) h1,
body .elementor .elementor-widget-heading:not(:last-child) h2,
body .elementor .elementor-widget-heading:not(:last-child) h3,
body .elementor .elementor-widget-heading:not(:last-child) h4 { margin-bottom: .5em; }

/* Blocos de texto seguidos precisam de respiro entre si. */
body .elementor .elementor-widget-text-editor:not(:last-child) { margin-bottom: var(--e2); }

/* Seletores `> * + *` do design system esperam filhos diretos; com o Elementor
   no meio, os filhos reais ficam dentro do wrap de widgets. */
.cta-foto__texto > .elementor-widget-wrap > * + * { margin-top: var(--e3); }
.painel > .elementor-widget-wrap > * + * { margin-top: var(--e2); }

/* ---------- Botões nativos ----------------------------------------------- */

/* Uma coluna com a classe .grupo-botoes empilha os botões, porque o wrap de
   widgets do Elementor é uma coluna flex. Aqui ela vira linha, como no
   original — e cada botão continua sendo um widget editável. */
.elementor-column.grupo-botoes > .elementor-widget-wrap {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .875rem;
}
.elementor-column.grupo-botoes > .elementor-widget-wrap > .elementor-widget { width: auto; }

/* O bloco do botão não deve criar caixa própria: quem desenha é o link. */
.elementor-widget-button.botao > .elementor-widget-container,
.elementor-widget-button.botao .elementor-button-wrapper { display: inline-block; }
.elementor-widget-button.botao .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: .6rem; }

/* Botão centralizado nas seções que pedem isso */
.centro .elementor-column.grupo-botoes > .elementor-widget-wrap { justify-content: center; }

/* ---------- Foto sangrada do hero como coluna ---------------------------- */

/* A foto do hero é uma COLUNA com a classe .hero__midia: assim a imagem é um
   widget trocável pelo painel, e o posicionamento absoluto continua vindo do
   CSS do projeto. */
.hero > .elementor-container > .elementor-column.hero__midia > .elementor-widget-wrap { height: 100%; }
.hero__midia .elementor-widget-image,
.hero__midia .elementor-widget-image > .elementor-widget-container { height: 100%; }
.hero__midia .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 88%; }

/* ---------- Composição de fotos ------------------------------------------ */

/* Cada foto da composição é um widget de imagem dentro de uma moldura. */
.composicao__palco .elementor-widget-image,
.composicao__palco .elementor-widget-image > .elementor-widget-container { height: 100%; }

/* ---------- Formulário do construtor ------------------------------------- */

/* O espaçamento entre campos vem de `gap`, então as colunas de 50% precisam
   descontar metade dele — senão 50% + 50% + gap passa de 100% e quebra linha. */
.elementor-form .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; gap: var(--e3); }
.elementor-form .elementor-field-group.elementor-col-100 { width: 100%; }
.elementor-form .elementor-field-group.elementor-col-50 { width: calc(50% - (var(--e3) / 2)); }
@media (max-width: 620px) { .elementor-form .elementor-field-group.elementor-col-50 { width: 100%; } }

/* o rótulo em negrito é do design system; o kit do Elementor tinha prioridade */
body .elementor .elementor-form .elementor-field-label { font-weight: 700; margin-bottom: 0; }
/* o aviso de consentimento herda o painel de destaque do projeto */
.elementor-form .elementor-field-type-acceptance { padding: var(--e3); background: var(--agua); border: 1px solid var(--agua-forte); border-radius: var(--r-m); }

/* ---------- Linha do tempo com cartões editáveis ------------------------- */

/* Os cartões de edição são widgets, para a cliente editar ano, técnica e texto.
   O traço curvo era um SVG no HTML: virou decoração de CSS, porque ninguém
   edita uma curva — e é exatamente o tipo de coisa que deve sair do conteúdo. */
.elementor-section.linha-tempo--blocos { position: relative; padding-top: clamp(3rem, 9vw, 7rem); }
.elementor-section.linha-tempo--blocos > .elementor-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--e4);
}
.linha-tempo--blocos > .elementor-container > .elementor-column { width: auto; }
.elementor-section.linha-tempo--blocos::before {
	content: '';
	position: absolute; inset: 0 0 auto; height: clamp(3rem, 9vw, 7rem);
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220' preserveAspectRatio='none'%3E%3Cpath d='M 0,96 C 90,150 150,158 230,150 C 340,139 420,86 520,84 C 620,82 640,101 720,95 C 830,87 910,60 1000,16' fill='none' stroke='%2308aec5' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	pointer-events: none;
}
@media (max-width: 700px) { .elementor-section.linha-tempo--blocos::before { display: none; } }

/* ---------- Painéis lado a lado com a mesma altura ----------------------- */

/* A grade nasce com align-items:start, então painéis de texto diferente ficam
   com alturas diferentes. Aqui eles esticam e o botão desce para o rodapé do
   cartão, alinhando os dois. */
.apoio-grade > .elementor-container > .elementor-column.painel,
.apoio-grade > .elementor-column.painel { align-self: stretch; }
.elementor-column.painel > .elementor-widget-wrap { height: 100%; }
.elementor-column.painel > .elementor-widget-wrap > .elementor-section:last-child { margin-top: auto; }

/* ---------- Topo da página de edição, com foto sangrada ------------------ */

/* O ano em corpo gigante já carrega o peso do topo; a manchete abaixo dele
   funciona melhor menor, sem competir. */
.topo-pagina--edicao h1 {
	font-size: clamp(1.6rem, 3.2vw + .25rem, 2.85rem);
	/* com a manchete menor, o ano gigante ficava colado nela */
	margin-top: .35em;
}

/* Mesma ideia do hero da home: a foto sangra pela direita com recorte
   diagonal, e o texto fica por cima num contêiner mais estreito. Dá à página
   da edição corrente o peso visual que ela precisa ter. */
.topo-pagina--edicao > .elementor-container,
.topo-pagina--edicao > .elementor-container > .elementor-column,
.topo-pagina--edicao > .elementor-container > .elementor-column > .elementor-widget-wrap { position: static; }

.topo-pagina--edicao .topo-pagina__conteudo { position: relative; z-index: 2; }
.topo-pagina--edicao .topo-pagina__conteudo > .elementor-widget-wrap { max-width: 46rem; }

body .elementor .elementor-column.topo-pagina__midia {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 44%;
	z-index: 0;
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.topo-pagina__midia > .elementor-widget-wrap,
.topo-pagina__midia .elementor-widget-image,
.topo-pagina__midia .elementor-widget-image > .elementor-widget-container { height: 100%; }
.topo-pagina__midia img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* véu que garante contraste do texto sobre a foto */
.topo-pagina__midia::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(100deg, #eaf7fa 0%, rgba(234, 247, 250, .62) 26%, rgba(234, 247, 250, 0) 58%);
	pointer-events: none;
}

@media (max-width: 900px) {
	body .elementor .elementor-column.topo-pagina__midia {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 10;
		clip-path: none;
		margin-top: var(--e4);
		border-radius: var(--r-g);
		overflow: hidden;
	}
	.topo-pagina__midia::after { display: none; }
	.topo-pagina--edicao .topo-pagina__conteudo > .elementor-widget-wrap { max-width: none; }
}

/* moldura mais alta, para foto em retrato ao lado de texto */
.moldura--alta { aspect-ratio: 3 / 4; }

/* ---------- Composição de fotos como seção interna ----------------------- */

.elementor-section.composicao__palco > .elementor-container { display: contents; }
.elementor-section.composicao__palco { position: relative; }

/* Toda coluna do Elementor nasce com width:100%. As peças sobrepostas da
   composição têm largura própria no design system e precisam recuperá-la,
   senão as fotos de apoio e o selo ocupam a largura inteira do palco. */
/* `body .elementor` na frente porque .elementor-column.elementor-col-100 tem a
   mesma especificidade e vence por vir depois na cascata. */
body .elementor .elementor-column.composicao__principal { width: auto; }
body .elementor .elementor-column.composicao__secundaria { width: clamp(130px, 40%, 220px); }
body .elementor .elementor-column.composicao__terciaria { width: clamp(110px, 30%, 172px); }
body .elementor .elementor-column.composicao__selo { width: auto; }
@media (max-width: 620px) {
	body .elementor .elementor-column.composicao__secundaria { width: 38%; }
	body .elementor .elementor-column.composicao__terciaria { width: 32%; }
}

/* O kit do Elementor pinta os h3 e sequestrava a cor do título do pilar. */
body .elementor .manifesto__pilar h3,
body .elementor .manifesto__pilar h3.elementor-heading-title { color: var(--turquesa); font-size: 1.35rem; }
.composicao__legenda { margin-top: 1rem; font-size: var(--t-peq); color: var(--tinta-suave); }

/* ---------- Colunas que viram blocos do design system -------------------- */

.elementor-column.aviso > .elementor-widget-wrap,
.elementor-column.qrcode > .elementor-widget-wrap { width: 100%; }
.elementor-column.aviso { margin-top: var(--e5); max-width: var(--largura-texto); }
.texto-peq { font-size: var(--t-peq); }

/* ---------- Galeria nativa com a grade do projeto ------------------------ */

/* O widget de galeria herda a marcação de galeria do WordPress, que distribui
   os itens com larguras percentuais e mantém a miniatura no tamanho natural —
   o resultado eram fotos minúsculas encolhidas num canto. Aqui a grade do
   design system assume. */
.elementor-widget-image-gallery .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--e2);
	margin: 0;
}
/* O CSS de galeria do WordPress aplica max-width: 33.33% ao item, pensando na
   distribuição em porcentagem. Dentro de uma célula de grade isso encolhia a
   foto para um terço da célula. */
.elementor-widget-image-gallery .gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
}
.elementor-widget-image-gallery .gallery-icon,
.elementor-widget-image-gallery .gallery-icon a { display: block; }
.elementor-widget-image-gallery .gallery-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0 !important;
	border-radius: var(--r-m);
	box-shadow: var(--sombra-1);
	transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
}
.elementor-widget-image-gallery .gallery-item img:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.elementor-widget-image-gallery .gallery-caption { display: none; }

/* ---------- Carrosséis nativos com a cara do projeto --------------------- */

/* O Swiper posiciona os slides em linha e conta com o contêiner recortando o
   excedente. Sem isto a página inteira ganha barra de rolagem horizontal. */
.galeria-projeto, .depoimentos-projeto { width: 100%; min-width: 0; overflow: hidden; }
.galeria-projeto .swiper,
.galeria-projeto .swiper-container,
.galeria-projeto .elementor-image-carousel-wrapper,
.depoimentos-projeto .swiper,
.depoimentos-projeto .swiper-container,
.depoimentos-projeto .elementor-testimonial-wrapper { overflow: hidden; width: 100%; }

/* Sem tamanho definido o carrossel exibia a miniatura no tamanho natural
   (150px quadrados). Aqui a foto preenche o slide com proporção fixa, como na
   galeria do site original. */
.galeria-projeto .swiper-slide img,
.galeria-projeto .elementor-image-carousel-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-m);
	box-shadow: var(--sombra-1);
	transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.galeria-projeto .swiper-slide img:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
/* a largura do slide é o Swiper quem calcula (três por vez); forçar 100% aqui
   fazia o carrossel exibir uma foto só */
.galeria-projeto .swiper-slide-inner,
.galeria-projeto .elementor-carousel-image { width: 100%; }
.galeria-projeto .elementor-swiper-button,
.depoimentos-projeto .elementor-swiper-button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	background: var(--branco);
	border: 1.5px solid var(--linha);
	border-radius: 50%;
	color: var(--turquesa-escuro);
}
.galeria-projeto .elementor-swiper-button:hover,
.depoimentos-projeto .elementor-swiper-button:hover {
	background: var(--turquesa-escuro); border-color: var(--turquesa-escuro); color: var(--branco);
}
.galeria-projeto .swiper-pagination-bullet,
.depoimentos-projeto .swiper-pagination-bullet {
	width: 32px; height: 8px; border-radius: 999px;
	background: var(--agua-forte); opacity: 1;
}
.galeria-projeto .swiper-pagination-bullet-active,
.depoimentos-projeto .swiper-pagination-bullet-active { background: var(--turquesa-escuro); width: 52px; }

/* O carrossel nativo entrega o depoimento solto no fundo. O design system tem
   um cartão para isso: branco, com a barra turquesa à esquerda. */
.depoimentos-projeto .elementor-testimonial {
	padding: var(--e4);
	background: var(--branco);
	border: 1px solid var(--linha);
	border-left: 5px solid var(--turquesa-forte);
	border-radius: var(--r-m);
	box-shadow: var(--sombra-1);
	height: 100%;
	text-align: left;
}
.depoimentos-projeto .swiper-slide { height: auto; padding: 4px; }
.depoimentos-projeto .elementor-testimonial__footer { margin-top: 0; }

/* o widget centraliza tudo; o depoimento do projeto é alinhado à esquerda */
.depoimentos-projeto .elementor-testimonial,
.depoimentos-projeto .elementor-testimonial__content,
.depoimentos-projeto .elementor-testimonial__text,
.depoimentos-projeto .elementor-testimonial__footer,
.depoimentos-projeto .elementor-testimonial__name,
.depoimentos-projeto .elementor-testimonial__title { text-align: left; }

/* ---------- Seção compacta ---------------------------------------------- */

/* Para blocos curtos (um aviso, um botão) o respiro padrão de seção deixa o
   conteúdo perdido no meio da faixa. */
.secao--compacta { padding-block: var(--e5); }

.depoimentos-projeto .elementor-testimonial__text {
	font-family: var(--fonte-display);
	font-optical-sizing: none;
	font-variation-settings: 'opsz' 18, 'SOFT' 60, 'WONK' 1;
	font-size: clamp(1.25rem, 1.4vw + 1rem, 1.75rem);
	line-height: 1.4;
	color: var(--tinta);
}
.depoimentos-projeto .elementor-testimonial__name {
	margin-top: var(--e3);
	font-size: var(--t-peq); color: var(--tinta-suave); font-weight: 700;
}

/* ---------- Link em forma de seta como botão nativo --------------------- */

.elementor .botao--link .elementor-button {
	min-height: 0; padding: 0; background: none; border: 0; box-shadow: none;
	color: var(--turquesa-escuro); font-size: var(--t-peq); font-weight: 700;
	border-bottom: 2px solid var(--turquesa-forte); border-radius: 0;
}
.elementor .botao--link .elementor-button:hover { background: none; box-shadow: none; transform: none; }
.elementor .secao--fundo .botao--link .elementor-button { color: var(--agua-forte); border-color: var(--turquesa); }

/* ---------- Widgets que não devem ocupar a linha inteira ----------------- */

/* O Elementor dá width:100% a todo widget. Peças que o design system trata
   como "pílula" ou selo precisam encolher para o conteúdo. */
.elementor-column .elementor-widget-wrap > .elementor-widget.marco__etiqueta,
.elementor-column .elementor-widget-wrap > .elementor-widget.hero__selo,
.elementor-column .elementor-widget-wrap > .elementor-widget-button.botao--link { width: auto; }
.elementor-column .elementor-widget-wrap > .elementor-widget.marco__etiqueta { align-self: start; }

/* ---------- Widgets de texto --------------------------------------------- */

/* O editor de texto envolve o conteúdo num div extra. Quando a classe do
   projeto está no widget, o parágrafo interno não pode herdar margem do
   WordPress. */
.elementor-widget-text-editor > .elementor-widget-container > p:last-child,
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* .olho, .chamada e afins são aplicados no wrapper do widget; o texto real
   fica um nível abaixo e precisa herdar a formatação. */
.elementor-widget.olho > .elementor-widget-container,
.elementor-widget.chamada > .elementor-widget-container,
.elementor-widget.hero__apoio > .elementor-widget-container,
.elementor-widget.hero__nota > .elementor-widget-container,
.elementor-widget.impacto__rotulo > .elementor-widget-container,
.elementor-widget.marco__resumo > .elementor-widget-container { all: inherit; display: block; }

/* ---------- Imagens ------------------------------------------------------ */

/* Dentro de .moldura a imagem precisa preencher o quadro; as camadas do
   Elementor teriam altura automática e quebrariam o aspect-ratio. */
.moldura > .elementor-widget-container,
.moldura .elementor-widget-image,
.moldura .elementor-widget-image > .elementor-widget-container { height: 100%; }
.moldura .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Editor: nada pode ficar invisível ---------------------------- */

/* Repetido aqui porque a folha do editor carrega em contexto próprio. */
.elementor-editor-active .cascata > .elementor-widget-wrap > *,
.elementor-editor-preview .cascata > .elementor-widget-wrap > * {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}