/*
* Complementos do app.css, todos nascidos da saida do WordPress:
* - o botao flutuante de WhatsApp, que era um widget Lottie servido por um
* WordPress de staging que saiu do ar;
* - o honeypot e o estado "enviando" dos formularios, agora tratados por
* /assets/forms.js no lugar do Contact Form 7.
*
* O posicionamento fixo do botao continua vindo do app.css, pela classe
* .elementor-element-612bf10 que o Elementor gerou - aqui so entra a aparencia
* do icone que substituiu a animacao.
*/
.qs-whatsapp-float__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: #25d366;
color: #fff;
font-size: 36px;
line-height: 1;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.elementor-widget-lottie a:hover .qs-whatsapp-float__icon,
.elementor-widget-lottie a:focus-visible .qs-whatsapp-float__icon {
transform: scale(1.08);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
/* Pulso discreto, no lugar do loop da animacao antiga. */
@media (prefers-reduced-motion: no-preference) {
.qs-whatsapp-float__icon {
animation: qs-whatsapp-pulse 2.4s ease-in-out infinite;
}
}
@keyframes qs-whatsapp-pulse {
0%,
100% {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(37, 211, 102, 0.5);
}
50% {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 14px rgba(37, 211, 102, 0);
}
}
/* Texto so para leitor de tela: o icone sozinho nao diz o que o link faz. */
.qs-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Honeypot injetado por forms.js. */
.qs-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.qs-form--sending {
opacity: 0.7;
pointer-events: none;
}
/*
* Pontos de melhoria de layout apontados manualmente (alinhamento e
* espacamento que o app.css, vindo do Elementor, deixa inconsistente):
*/
/* 1) Pagina Institucional / Sobre nos: a grade de imagens + legendas logo
* abaixo de "Nossa historia" (secao .elementor-element-260f225: Laboratorios,
* Salas de aulas, Centro tecnologico e Biblioteca) nascia desalinhada: o
* app.css da text-align:center a tres legendas e text-align:end so a
* "Salas de aulas" (.elementor-element-58b7e37), que ficava jogada para a
* direita, fora de esquadro com as outras tres e com as imagens.
*
* ATENCAO a especificidade: o app.css escreve essas regras na forma composta
* do Elementor - .elementor-66 .elementor-element.elementor-element-58b7e37,
* que vale 0,3,0. Um override simples (.elementor-element-58b7e37, 0,1,0)
* perde e nao surte efeito nenhum; por isso repetimos aqui o mesmo formato.
* Heranca do container tambem nao resolve, porque o app.css mira cada
* legenda diretamente e declaracao direta sempre vence heranca.
*
* O text-align na secao cuida das imagens, que nao tem regra propria (o
* widget de imagem do Elementor e inline-block e segue o alinhamento do pai). */
.elementor-66 .elementor-element.elementor-element-260f225 {
text-align: center;
}
.elementor-66 .elementor-element.elementor-element-242c933,
.elementor-66 .elementor-element.elementor-element-58b7e37,
.elementor-66 .elementor-element.elementor-element-ef58499,
.elementor-66 .elementor-element.elementor-element-7f335fb {
text-align: center;
}
/* Centralizar o texto, porem, so resolve metade: as quatro fotos tem alturas
* nativas diferentes (616, 552, 594 e 500px para a mesma largura de 800), e
* como as duas colunas de cada linha comecam no mesmo topo, cada legenda
* acabava comecando numa altura diferente da vizinha.
*
* Fixamos uma proporcao unica (perto da media das quatro, para nao mudar a
* escala do bloco) com object-fit:cover, que recorta em vez de distorcer. Com
* as imagens da mesma altura, as legendas de cada linha se alinham sozinhas.
* A mascara SVG do Elementor (mask-size:contain) continua valendo normalmente:
* ela se ajusta a nova caixa, igual nas quatro. */
.elementor-66 .elementor-element.elementor-element-739454c .elementor-widget-container img,
.elementor-66 .elementor-element.elementor-element-2a5eef3 .elementor-widget-container img,
.elementor-66 .elementor-element.elementor-element-c457619 .elementor-widget-container img,
.elementor-66 .elementor-element.elementor-element-a58cf26 .elementor-widget-container img {
width: 100%;
height: auto;
aspect-ratio: 800 / 570;
object-fit: cover;
}
/* 2) Cards de "Noticias recentes" (home e /blog): o app.css define a caixa
* de miniatura com padding-bottom proporcional (aspect ratio), mas so
* centraliza/corta a imagem dentro dela quando o container tem a classe
* .elementor-has-item-ratio - classe que o HTML gerado aqui nunca inclui.
* Sem ela, cada mantem sua proporcao nativa (ex.: 2048x1365, 1080x1080,
* 2226x2560, 1500x1000) e desalinha a grade de cards. Aplicamos o mesmo
* recorte/centralizacao independente dessa classe. */
.elementor-post__thumbnail {
position: absolute;
inset: 0;
}
.elementor-post__thumbnail img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
}
/* 3) Paginas de post do blog (template Elementor #1283, compartilhado por
* todas as noticias): titulo, meta-dados e corpo do texto ficam colados uns
* nos outros porque as regras responsivas do app.css zeram os paddings
* (.elementor-element-943a405 e .elementor-element-deac2fb). Devolvemos um
* respiro consistente entre esses blocos e entre os paragrafos do texto. */
.elementor-1283 .elementor-element-a1cfa5f {
margin-bottom: 16px;
}
.elementor-1283 .elementor-element-943a405 {
padding-top: 40px !important;
padding-bottom: 60px !important;
}
.elementor-1283 .elementor-element-deac2fb > .elementor-widget-container {
padding: 0 10px !important;
}
.elementor-1283 .elementor-element-deac2fb .wp-block-paragraph {
margin-bottom: 1.4em;
}
.elementor-1283 .elementor-element-deac2fb figure {
margin: 1.6em 0;
}
/* 4) Formularios "Deseja se matricular?" (home), "Cadastre seu curriculo"
* (/trabalhe-conosco) e /cadastrar-curriculo: o Contact Form 7 emitia um
*