`.
A caixa NÃO tem altura própria — quem tem altura é a
![]()
lá dentro
(520px fixos). Foi a lição das três tentativas anteriores: enquanto a
altura morava na caixa e a imagem tentava preenchê-la por porcentagem, flex
ou proporção, sempre havia um caminho em que a altura da caixa ficava
indefinida e a foto sumia ou sobrava fundo azul. Com a altura no próprio
elemento que precisa dela, não há dependência nenhuma a resolver. */
.fjpn-hero__foto {
position: relative;
border-radius: var(--fjpn-radius-3xl);
overflow: hidden;
box-shadow: var(--fjpn-shadow-modal-strong);
}
/* Igual ao aprovado: `
![]()
`.
Estática, largura total, altura fixa. É a imagem que carrega a altura, e a
caixa em volta apenas a recorta com o raio de canto — por isso não existe
caminho em que a altura fique indefinida.
O prefixo `.elementor` é obrigatório: o plugin declara
`.elementor img { height: auto }` com especificidade (0,1,1), que vence
`.fjpn-hero__foto-img` (0,1,0). Sem ele, esta altura é descartada em
silêncio — ver a nota no topo do base.css. */
.elementor .fjpn-hero__foto-img {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
}
.fjpn-hero__foto-overlay {
position: absolute;
inset: 0;
/* Gradiente escuro por cima da foto — espelha --fjpn-blue-dark (#133a7a)
em rgba; CSS não permite extrair os componentes de uma custom property
hexadecimal dentro de rgba(), por isso o valor fica literal aqui. */
background: linear-gradient(180deg, rgba(19, 58, 122, 0) 45%, rgba(19, 58, 122, 0.6) 100%);
pointer-events: none;
}
/* Badges flutuantes — 4 posições/animações fixas nos cantos da foto.
Itens além do 4º reaproveitam o ciclo (ver hero.php, `$indice % 4`). */
.fjpn-hero__badges {
position: absolute;
inset: 0;
pointer-events: none; /* a foto continua clicável/selecionável por baixo */
}
.fjpn-hero__badge {
position: absolute;
display: inline-flex;
align-items: center;
gap: var(--fjpn-gap-icon-text);
max-width: 160px;
padding: var(--fjpn-gap-icon-text) var(--fjpn-gap-medium);
background: var(--fjpn-white);
border-radius: var(--fjpn-radius-xl);
box-shadow: var(--fjpn-shadow-card-hover);
pointer-events: auto;
}
.fjpn-hero__badge--1 {
top: 8%;
left: -6%;
}
.fjpn-hero__badge--2 {
top: 8%;
right: -6%;
}
.fjpn-hero__badge--3 {
bottom: 10%;
left: -6%;
}
.fjpn-hero__badge--4 {
bottom: 10%;
right: -6%;
}
/* Em telas estreitas, os badges recuam para dentro da foto — o deslocamento
negativo do desktop faria o badge sair da viewport e criar scroll horizontal. */
@media (max-width: 767px) {
.fjpn-hero__badge--1,
.fjpn-hero__badge--3 {
left: 4%;
}
.fjpn-hero__badge--2,
.fjpn-hero__badge--4 {
right: 4%;
}
.fjpn-hero__badge {
max-width: 132px;
}
}
.fjpn-hero__badge-icone {
flex: 0 0 auto;
font-size: var(--fjpn-text-heading-sm);
line-height: 1;
}
.fjpn-hero__badge-texto {
display: flex;
flex-direction: column;
line-height: var(--fjpn-leading-snug);
}
.fjpn-hero__badge-linha {
font-family: var(--fjpn-font-sans);
font-size: var(--fjpn-text-small);
font-weight: var(--fjpn-weight-semibold);
color: var(--fjpn-text-primary);
}
/* ==========================================================
* 4. ONDA DECORATIVA
* Estrutura travada (não é conteúdo editável) — transição visual para a
* próxima seção, conforme doc da seção Hero.
* ========================================================== */
.fjpn-hero__wave {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
line-height: 0;
z-index: 0;
}
.fjpn-hero__wave svg {
width: 100%;
height: auto;
display: block;
}
.fjpn-hero__wave path {
fill: var(--fjpn-white);
}
/* ==========================================================
* 5. PREFERS-REDUCED-MOTION
* A regra global de base.css já zera duração/iteração de toda animação e
* transição da página (inclusive as classes fjpn-animate-fade-up* e
* fjpn-badge-float* usadas aqui, e o keyframe fjpn-hero-pulso acima) —
* nada adicional é necessário neste arquivo.
* ========================================================== */