:root{
--neon: #b9f419; /* verde da identidade */
--text-dark:#1b1b1b;
--text-light:#ffffff;
--bg-light:#eef3f7; /* fundo claro do header */
--bg-hover:#f5f8fb;
--divider:#d9e2ea;
--topbar-h: 44px; /* atualizado via JS */
--header-pad: 12px; /* padding vertical interno */
--drop-h: 0px; /* altura do dropdown (JS atualiza) */
}
:root{
--bg-1:#3b3b3b;
--bg-2:#2e2e2e;
--text:#e7e7e7;
--muted:#b9b9b9;
--accent:#b9f419; /* ajuste se quiser */
--ring:#7b7b7b;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
color:var(--text-dark);
background:#fff;
}
/* ====== WRAPPER que contém topbar + header ====== */
#header-wrap{
position:absolute; top:0; left:0; width:100%;
z-index: 70; /* abaixo do sticky z-index */
}
/* ====== TOPBAR ====== */
.topbar{
position:relative; width:100%;
z-index:60;
background:var(--neon);
color:#111; font-weight:700; font-size:.95rem;
}
.topbar .wrap{
max-width:1200px; margin:0 auto;
padding:.5rem 1rem;
display:flex; align-items:center; justify-content:space-between;
}
.topbar .left,.topbar .right{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.topbar i{ margin-right:.35rem }
/* ====== HEADER ====== */
.header{
position:absolute; left:0; top:var(--topbar-h); width:100%;
z-index:70;
}
/* faixa branca por trás do header + dropdown */
.header::after{
content:"";
position:absolute; inset:0 auto auto 0; right:0; top:0;
height: calc(100% + var(--drop-h)); /* cresce até o fim do submenu */
background:var(--bg-light);
box-shadow:0 6px 18px rgba(0,0,0,.08);
border-bottom:0; /* sem 1px entre topbar e faixa */
opacity:0; /* invisível sobre a imagem */
transform-origin: top;
transition: height .28s ease, opacity .18s ease;
z-index:1;
}
/* ativa a faixa quando há hover ou dropdown aberto (estado não-sticky) */
.header:hover::after,
.header.open::after{ opacity:1; }
/* ====== NAV ====== */
.nav{
position:relative; z-index:2; /* acima da faixa */
max-width:1200px; margin:0 auto;
padding: var(--header-pad) 1rem;
display:grid; grid-template-columns:1fr auto 1fr;
gap:1rem; align-items:center;
color:var(--text-light);
transition: color .2s ease;
}
.header:hover .nav,
.header.open .nav{ color:var(--text-dark); }
/* LOGO */
.logo{ display:flex; align-items:center; justify-content:center; text-decoration:none }
.logo img{
height:40px; display:block;
filter:invert(1) brightness(200%); /* branco sobre a foto */
transition:filter .2s ease;
}
.header:hover .logo img,
.header.open .logo img{ filter:none; }
/* links superiores à direita do logo */
.meta-links{
display:flex; align-items:center; gap:1rem; justify-content:flex-end;
font-size:.92rem; font-weight:600;
}
.meta-links a{ color:inherit; text-decoration:none }
.meta-links a:hover{ text-decoration:underline }
.flags{ display:flex; align-items:center; gap:.5rem }
.flag{ width:22px; height:15px; border-radius:2px; background:#ddd; display:inline-block; box-shadow:0 0 0 1px rgba(0,0,0,.08) inset }
.flag.br{ background:linear-gradient(#009739 0 50%, #ffdf00 50% 100%) }
.flag.uk{ background:linear-gradient(45deg,#012169 50%,#c8102e 50%) }
.flag.es{ background:linear-gradient(#aa151b 0 35%, #f1bf00 35% 65%, #aa151b 65% 100%) }
/* barra principal */
.mainbar{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:1rem }
/* MENU (nível 1) */
.menu{ display:flex; align-items:center; gap:1.4rem; font-weight:800; font-size:1.1rem; margin:0; padding:0 }
.menu > li{ list-style:none; position:relative }
.menu > li > a{
color:inherit; text-decoration:none;
padding:.45rem .6rem; line-height:1.1;
border:2px solid transparent; /* reserva p/ não “pular” */
}
/* SUBMENU (sem painel, apenas links) */
.submenu{
position:absolute; left:0; top:100%;
min-width:280px;
padding:.35rem 0px; /* só respiro vertical */
display:block; /* mantém medição de altura */
opacity:0; transform:translateY(-6px);
pointer-events:none;
transition:opacity .18s ease, transform .22s ease;
z-index:3; /* acima da faixa branca */
background:transparent; border:none; box-shadow:none;
}
.menu > li:hover .submenu{
opacity:1; transform:translateY(0); pointer-events:auto;
}
.submenu a{
display:block; padding:.55rem 0;
background:transparent; color:#1b1b1b; text-decoration:none;
border-radius:0;
}
.submenu a:hover{
color:#0d6d00;
padding-left:.4rem;
border-left:3px solid var(--neon);
}
/* BOTÃO/UTILS */
a > .utils{
text-decoration: none;
color: #fff;
}
.utils{
width: 200px;
height: 35px;
background: var(--neon);
text-align: center;
line-height: 35px;
font-weight: bold;
text-decoration: none;
color: #fff;
border-radius: 10px;
}
.search{
display:flex; align-items:center; gap:.6rem;
padding:.6rem .85rem; border-radius:999px;
border:1px solid rgba(255,255,255,.6); background:transparent;
transition:.18s ease; font-weight:600;
}
.search input{ border:0; outline:0; background:transparent; width:220px; color:inherit }
.header:hover .search,
.header.open .search{ border-color:var(--divider); background:#fff }
.header:hover .search input,
.header.open .search input{ color:var(--text-dark) }
/* ====== HERO (imagem dentro do section) ====== */
.hero{
position:relative; width:100%; overflow:hidden;
}
.hero img{
width:100%; height:auto; display:block; /* imagem sempre inteira */
}
/* conteúdo… (padding para não ficar sob o header) */
main{
max-width:1200px; margin:2rem auto 4rem;
padding: calc(var(--topbar-h) + 0px) 1rem 0; /* ajuste conforme seu header */
}
/* acessibilidade */
@media (prefers-reduced-motion: reduce){
.header::after, .submenu{ transition:none }
}
/* ===== Submenu mais compacto (sem negrito) ===== */
.submenu{ padding: .2rem 0; } /* menos respiro do container */
.submenu a{
font-weight: 400; /* tira o negrito herdado */
font-size: .92rem; /* menor que ~1rem */
line-height: 1.2; /* mais compacto */
padding: .35rem 0; /* era .55rem 0 */
}
.submenu a:hover{
padding-left: .30rem; /* era .40rem */
border-left: 2px solid var(--neon); /* era 3px */
}
/* ===== STICKY (topbar + header juntos) ===== */
#header-wrap.sticky{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 90;
}
/* Quando sticky, a faixa branca fica sempre visível e acompanha o dropdown */
#header-wrap.sticky .header::after{
opacity: 1;
height: calc(100% + var(--drop-h));
}
/* Quando sticky, força cores escuras do conteúdo do header */
#header-wrap.sticky .nav{ color: var(--text-dark); }
#header-wrap.sticky .logo img{ filter: none; }
#header-wrap.sticky .search{ border-color: var(--divider); background:#fff; }
#header-wrap.sticky .search input{ color: var(--text-dark); }
/* espaçador que evita “pulo” de layout quando o conjunto fica fixed */
#header-spacer{ height:0; }
/* ====== FOOTER ====== */
.site-footer{
color:var(--text);
background:linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
.final_footer{
color:var(--text);
background:linear-gradient(180deg, var(--bg-1), var(--bg-2));
font-size: 1.2em;
font-weight: 800;
}
.centro_footer{
width: 80%;
text-align: center;
margin: 6px auto;
}
.footer-wrap{
max-width:1280px;margin:0 auto;
padding:48px 20px 28px;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap:28px;
align-items:start;
}
/* coluna esquerda */
.brand-block .logo{
display:block; margin-bottom:18px;
}
.brand-block .logo img{
height:38px; display:block; filter:brightness(1.05);
}
.brand-block .title{
margin:.5rem 0 1rem; font-weight:700; letter-spacing:.02em;
}
.brand-block ul{
list-style:none; padding:0; margin:0 0 18px 0;
}
.brand-block li{
display:flex; align-items:flex-start; gap:.6rem;
padding:.28rem 0; color:var(--muted);
}
.brand-block li i{ min-width:18px; margin-top:.15rem; color:#d9d9d9 }
.brand-block a:hover{ text-decoration:underline; }
.policies{
margin-top:10px; display:flex; flex-direction:column; gap:.38rem;
}
.policies a{ color:var(--muted); font-size:.95rem }
.policies a:hover{ color:#fff }
/* colunas centrais com os “discos” */
.wheels{
display:flex; align-items:center; justify-content:center;
}
.wheels img{
width:100%; max-width:360px; height:auto; display:block;
border-radius:50%;
/* uma leve sombra para destacar no fundo */
box-shadow:0 10px 26px rgba(0,0,0,.25);
}
/* bloco de serviços complementares */
.complementary{
grid-column: 1 / -1;
margin-top:8px;
text-align:center;
color:#dcdcdc;
letter-spacing:.04em;
font-weight:600;
}
.complementary span{
color:#fff; font-weight:700;
}
.complementary .pipe{
opacity:.55; padding:0 .6rem;
}
/* ícones sociais */
.social{
grid-column:1 / -1;
display:flex; align-items:center; justify-content:flex-start;
gap:14px; margin-top:18px;
}
@media(min-width:760px){
.social{ justify-content:flex-start; }
}
.social a{
width:42px;height:42px;border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
border:2px solid var(--ring);
color:#f0f0f0; font-size:18px;
transition:transform .15s ease, background .15s ease, color .15s ease;
}
.social a:hover{
transform:translateY(-2px);
background:#1f1f1f; color:#fff; border-color:#9a9a9a;
}
/* faixa inferior com endereço */
.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);
color:#f0f0f0; text-align:center; padding:14px 16px 18px;
font-weight:700;
}
.footer-bottom .addr{
max-width:1280px;margin:0 auto;opacity:.95;
}
.footer-bottom .addr span{ opacity:.8 }
/* responsivo */
@media (max-width:1080px){
.footer-wrap{
grid-template-columns: 1.2fr 1fr 1fr;
}
}
@media (max-width:900px){
.footer-wrap{
grid-template-columns: 1fr;
}
.wheels{
justify-content:flex-start;
}
.wheels img{
max-width:320px; margin:10px 0;
}
.social{ justify-content:flex-start; }
}
.limita10{
width: 100%;
}
.limita10 img{
width: 100%;
}
.limita7{
width: 70%;
float: left;
}
.limita3{
width: 30%;
float: left;
}
.limita3 img{
width: 95%;
margin-left: 5%;
}
.bolinha{
width: 15px;
height: 15px;
background:var(--neon);
border-radius: 50%;
float: left;
margin-right: 10px;
}
.imagem_geral{
width: 100%;
margin-bottom: -15px;
}
.imagem_geral img{
width: 100%;
}
.hero-dinamico{
position: relative;
min-height: 70vh; /* ou 80vh se preferir */
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-dinamico .hero-buttons{
position: relative;
z-index: 2;
display: flex;
gap: 24px;
}
.hero-dinamico .btn{
background: rgba(255,255,255,0.9);
padding: 18px 32px;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
color: #1a1a1a;
cursor: pointer;
transition: all .3s ease;
border: none;
}
.hero-dinamico .btn:hover{
background: #b9f419;
color: #111;
transform: translateY(-4px);
}
/* ===== container ===== */
.form-wrap{
max-width: 1000px;
margin: 40px auto 80px;
padding: 0 24px;
}
.lead{
color: var(--muted);
margin: 0 0 28px;
font-size: clamp(16px, 2.2vw, 18px);
}
/* ===== grid ===== */
.grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.grid-full{ grid-column: 1 / -1; }
/* ===== fields ===== */
.field{
position:relative;
}
.input, .select, .textarea{
width:100%;
padding: 18px 16px;
border: 2px solid #ccc;
background: var(--bg);
border-radius: 6px;
font: 600 16px/1.2 Montserrat, sans-serif;
color: #000;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder{ color:#000; font-weight:600 }
.input:focus, .select:focus, .textarea:focus{
border-color:#000;
box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset;
}
/* Select com seta */
.select{
-webkit-appearance:none;
appearance:none;
background-image:
url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;
background-position:right 14px center;
background-size:18px;
padding-right:46px;
}
/* textarea + contador */
.textarea{
min-height: 160px;
resize: vertical;
}
.counter{
position:absolute; right:8px; bottom:-22px;
font-size:13px; color:#666;
}
/* consentimento */
.consent{
display:flex; align-items:flex-start; gap:12px;
margin-top: 12px;
}
.consent input{
width:20px; height:20px; margin-top:2px;
}
.consent label{
font-size: 14px; color:#000; line-height:1.4;
}
.consent a{ color:#000; font-weight:700; text-decoration:underline; }
/* botão */
.actions{ margin-top: 12px; }
button[type=submit]{
width: 290px; height: 58px;
border-radius: 8px;
border:0;
background: #ccc;
color:#7b7b7b;
font: 700 18px/1 Montserrat, sans-serif;
letter-spacing:.02em;
cursor:not-allowed;
transition: filter .15s ease, transform .05s ease;
}
button[type=submit].enabled{
background: #111; /* fiel ao print (botão escuro habilitado) */
color:#fff;
cursor:pointer;
}
button[type=submit].enabled:hover{ filter:brightness(1.05) }
button[type=submit].enabled:active{ transform: translateY(1px) }
/* responsivo */
@media (max-width:840px){
.grid{ grid-template-columns: 1fr; }
}
.carregando {
position: relative;
display: inline-block;
padding: 5px 10px;
font-weight: bold;
color: #000; /* cor do texto */
z-index: 1;
overflow: hidden;
}
/* Fundo animado */
.carregando::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background: var(--neon);
z-index: -1;
animation: carregarBarra 2s forwards ease-out;
}
/* Animação de preenchimento */
@keyframes carregarBarra {
from {
width: 0%;
}
to {
width: 100%;
}
}
.carregandox{
width: auto;
float: left;
margin-right: 8px;
background: var(--neon);
}
.limita10 span, .limita7 span, .pvv-hero-sub-pvv span, .pvv-card-text-pvv span, .text-somos span{
background: var(--neon);
font-weight: bold;
}
:root{
--somos-text:#111;
--somos-green:#b9f419;
}
*{box-sizing:border-box}
/* ===== SECTION ===== */
.main-somos{ background:#fff; padding:56px 20px; }
.wrap-somos{
max-width:1200px; margin:0 auto;
display:grid; grid-template-columns: 1.15fr 1fr; gap:36px;
}
/* ===== LEFT: CARDS ===== */
.grid-somos{
display:grid; gap:26px;
grid-template-columns: repeat(3, 1fr);
align-items:start;
}
.card-somos{ text-align:center; }
/* transição suave no ícone */
.badge-somos img{
transition: filter .2s ease, transform .2s ease;
}
/* fica cinza no hover do card (e no focus, pra acessibilidade) */
.card-somos:hover{
filter: grayscale(100%) brightness(0.9) contrast(1.05);
}
/* opcional: pequeno destaque no losango ao hover */
.card-somos:hover .badge-somos,
.card-somos:focus-within .badge-somos{
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.badge-somos{
width:155px; height:155px; margin:0 auto 12px;
display:grid; place-items:center;
border:2px solid #d3d3d3;
border-radius:24px;
transform:rotate(45deg);
background:#fff;
box-shadow:0 4px 16px rgba(0,0,0,.06);
}
/* imagens dentro do losango */
.badge-somos img{
width:78px; height:auto; display:block;
transform:rotate(-45deg); /* corrige a rotação para ficar reto */
user-select:none; pointer-events:none;
border-radius:24px;
}
.title-somos{ font-weight:800; letter-spacing:.02em; margin:30px 0 10px; }
.desc-somos{
color:#333; font-size:.95rem; line-height:1.5;
max-width:320px; margin:0 auto;
}
/* ===== RIGHT: TEXT BLOCK ===== */
.right-somos{ align-self:center; }
.heading-somos{
font-weight:800; font-size: clamp(30px, 5vw, 54px);
line-height:1.05; margin:0 0 14px;
}
.right-somos h2{
font-size: 2em;
}
.highlight-somos{ background:var(--somos-green); padding:2px 6px; border-radius:3px; }
.text-somos{ color:#222; line-height:1.65; font-size: clamp(16px, 2.2vw, 18px); }
/* ===== RESPONSIVO ===== */
@media (max-width: 1080px){
.wrap-somos{ grid-template-columns: 1fr; }
.right-somos{ order:-1; }
}
@media (max-width: 780px){
.grid-somos{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
.grid-somos{ grid-template-columns: 1fr; }
.badge-somos{ width:140px; height:140px; }
.badge-somos img{ width:70px; }
}
:root{
--pvv-green:#b9f419;
--pvv-text:#111;
--pvv-muted:#2b2b2b;
--pvv-line:#e7e7e7;
--pvv-bg:#f7f7f7;
--pvv-white:#fff;
/* fundos opcionais dos cards (troque pelos seus arquivos se quiser) */
--visao-bg-img: url('images/visao-bg.jpg'); /* opcional */
--valores-bg-img: url('images/valores-bg.jpg'); /* opcional */
}
*{box-sizing:border-box}
body{margin:0; font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--pvv-text)}
/* ====== BLOCO INTEIRO COM FUNDO (full-bleed + 100vh) ====== */
.pvv-main-pvv{
/* faz o fundo ocupar a janela inteira */
width: 100vw; /* 100% da largura da janela */
margin-left: calc(50% - 50vw); /* sangra o fundo até as bordas */
margin-right: calc(50% - 50vw);
/* espaçamento interno (ajuste se quiser) */
padding: 60px 20px;
/* duas camadas: 1) gradiente; 2) imagem */
background-image:
linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)),
url('../images/proposito.jpg'); /* troque pelo caminho correto */
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
background-size: 100% 100%, cover; /* gradiente cobre tudo; imagem preenche */
/* opcional: deixa o fundo “parallax” suave em desktop */
background-attachment: scroll, fixed; /* remova o 'fixed' se não quiser */
}
/* mantém o conteúdo centralizado dentro do bloco full-bleed */
.pvv-wrap-pvv{ max-width:1200px; margin:0 auto; }
.pvv-wrap-pvv{ max-width:1200px; margin:0 auto; }
/* ============ PROPÓSITO (banner) ============ */
.pvv-hero-pvv{
position:relative; overflow:hidden; margin-bottom:28px;
border-radius:18px;
background:
linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.pvv-rail-pvv{
position:absolute; inset:0 auto 0 0; width:min(14px,1.2vw); background:var(--pvv-green);
}
.pvv-hero-head-pvv{
padding:38px clamp(20px, 5vw, 48px);
margin-left:clamp(8px, 2vw, 16px);
display:grid; grid-template-columns:auto 1fr; gap:18px 14px; align-items:center;
}
.pvv-hero-title-pvv{
font-size: clamp(25px, 5vw, 38px);
line-height:1.05; font-weight:800; margin:0;
}
.pvv-hero-sub-pvv{
grid-column: 1 / -1; font-size: clamp(16px, 2.2vw, 18px); line-height:1.65; color:var(--pvv-muted); margin:0;
}
/* ícone do banner */
.pvv-hero-icon-pvv{
width:58px; height:58px; border-radius:14px; background:var(--pvv-green);
display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.pvv-hero-icon-pvv svg{ width:34px; height:34px; }
.pvv-hero-icon-pvv .ring{ fill:none; stroke:#111; stroke-width:2; }
.pvv-hero-icon-pvv .ticks{ stroke:#111; stroke-width:2; fill:none; }
.pvv-hero-icon-pvv .dot{ fill:#111; }
/* ornamento decorativo */
.pvv-ornament-pvv{
position:absolute; right:-10px; bottom:-6px; width:min(46%, 520px); pointer-events:none; opacity:.6;
}
/* ============ GRID (VISÃO/VALORES) ============ */
.pvv-grid-pvv{
display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
/* CARD BASE COM VIDRO + HOVER */
.pvv-card-pvv{
position:relative;
border-radius:16px;
overflow:hidden;
border:1px solid rgba(0,0,0,.06);
background:
linear-gradient( to bottom right, rgba(255,255,255,.75), rgba(255,255,255,.92) );
backdrop-filter: blur(6px);
box-shadow:0 10px 26px rgba(0,0,0,.10);
transition: transform .18s ease, box-shadow .18s ease;
}
.pvv-card-pvv::after{
/* ribbon diagonal verde no canto superior direito */
content:"";
position:absolute; top:0; right:-36px; width:120px; height:36px;
background:var(--pvv-green);
transform: rotate(45deg);
box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.pvv-card-pvv:hover{
transform: translateY(-4px);
box-shadow:0 14px 34px rgba(0,0,0,.14);
}
/* HEADER DO CARD */
.pvv-card-head-pvv{
display:flex; align-items:center; gap:12px;
padding:20px 20px 8px 20px;
}
.pvv-badge-pvv{
width:48px; height:48px; border-radius:14px;
background: linear-gradient(180deg, var(--pvv-green), #a5df10);
display:grid; place-items:center;
box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.pvv-badge-pvv svg{ width:26px; height:26px; fill:#111; }
.pvv-card-title-pvv{ font-size: clamp(18px,2.1vw,22px); font-weight:800; margin:0; }
/* CORPO DO CARD */
.pvv-card-body-pvv{ padding: 0 20px 20px 20px; }
.pvv-card-text-pvv{ color:var(--pvv-muted); line-height:1.6; margin:0; font-size:1rem; }
/* BACKGROUND SUTIL NOS CARDS (com fallback a gradiente) */
.pvv-card-pvv.visao{
background:
linear-gradient( to bottom right, rgba(255,255,255,.82), rgba(255,255,255,.95) ),
radial-gradient(1200px 500px at 110% -10%, rgba(185,244,25,.25) 0%, transparent 50%),
var(--visao-bg-img);
background-size: cover, cover, cover;
background-position: center, center, center;
}
.pvv-card-pvv.valores{
background:
linear-gradient( to bottom right, rgba(255,255,255,.82), rgba(255,255,255,.95) ),
radial-gradient(1200px 500px at -10% 110%, rgba(185,244,25,.22) 0%, transparent 50%),
var(--valores-bg-img);
background-size: cover, cover, cover;
background-position: center, center, center;
}
/* LISTA DE VALORES */
.pvv-list-pvv{
list-style:none; padding-left:0; margin:6px 0 0;
display:grid; gap:12px;
}
.pvv-list-pvv li{
position:relative; padding-left:30px; line-height:1.55; color:#fff;
}
.pvv-list-pvv li::before{
content:""; position:absolute; left:0; top:.45em;
width:16px; height:16px; border-radius:50%;
border:1px solid #ccc; background:#ccc;
}
/* RESPONSIVO */
@media (max-width:920px){
.pvv-grid-pvv{ grid-template-columns:1fr; }
.pvv-ornament-pvv{ width:60%; opacity:.5; }
}
/* LISTA DE VALORES COM MARCADORES MODERNOS */
.pvv-list-pvv{
list-style:none;
padding-left:0;
margin:10px 0 0;
display:grid;
gap:12px;
}
.pvv-list-pvv li{
position:relative;
padding-left:34px; /* espaço para o marcador */
line-height:1.55;
color:var(--pvv-muted);
font-weight:500;
}
/* marcador quadrado com + central */
.pvv-list-pvv li::before{
content:"+";
position:absolute;
left:0; top:50%;
transform:translateY(-50%);
width:22px; height:22px;
border-radius:4px;
background:#ccc;
color:#fff;
font-weight:800;
font-size:16px;
line-height:22px;
text-align:center;
box-shadow:0 2px 6px rgba(0,0,0,.15);
}
:root{
--neon:#b9f419;
--somos-text:#111;
--somos-muted:#444;
--somos-bg:#f7f7f7;
--somos-white:#fff;
}
.quem-somos{
background:var(--somos-bg);
padding:60px 20px;
font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:var(--somos-text);
}
.centro-quem-somos{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap:28px;
justify-content:center; /* centraliza quando não completa a linha */
}
.titulo-quem-somos{
max-width:1200px;
margin:0 auto;
}
.titulo-quem-somos h2{
font-size: 2.2em;
}
.titulo-quem-somos p{
font-size: 1.6em;
font-weight: 100;
}
/* CARD */
.box-socio{
background:var(--somos-white);
border:1px solid #e0e0e0;
border-radius:16px;
padding:22px 18px 28px;
text-align:center;
box-shadow:0 6px 18px rgba(0,0,0,.06);
transition: transform .25s ease, box-shadow .25s ease;
max-width:320px; /* todos do mesmo tamanho */
display:flex;
flex-direction:column;
}
.box-socio:hover{
transform: translateY(-6px);
box-shadow:0 12px 28px rgba(0,0,0,.12);
}
/* foto */
.box-socio img{
width:120px; height:120px;
object-fit:cover;
border-radius:50%;
border:4px solid var(--neon);
margin:0 auto 14px;
transition: border-color .2s ease, filter .2s ease;
}
.box-socio:hover img{
border-color:#bbb;
filter:grayscale(20%);
}
/* nome */
.box-socio .nome{
font-weight:800;
font-size:1.15rem;
margin-bottom:8px;
color:#000;
}
/* texto */
.box-socio p{
font-size:.95rem;
line-height:1.55;
color:var(--somos-muted);
margin:0 0 12px;
}
/* especialidade */
.box-socio li{
list-style:none;
font-weight:700;
color:#000;
background:var(--neon);
padding:8px 12px;
border-radius:6px;
display:inline-block;
font-size:.9rem;
margin-top:auto; /* cola no rodapé do card */
}
/* responsivo */
@media(max-width:960px){
.centro-quem-somos{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media(max-width:640px){
.box-socio{ max-width:100%; }
.box-socio img{ width:100px; height:100px; }
}
/* ====== TÍTULO SÓCIOS ====== */
.heading-somos-novo{
font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 800;
font-size: clamp(28px, 5vw, 46px); /* responsivo */
line-height: 1.1;
text-align: center;
margin: 0 0 14px;
color: #111;
letter-spacing: .02em;
}
.heading-somos-novo .highlight-somos{
background: #b9f419; /* verde neon */
padding: 2px 8px;
border-radius: 4px;
}
/* subtítulo */
.text-somos-novo{
text-align: center;
font-size: clamp(16px, 2vw, 20px);
color: #333;
margin: 0 0 36px;
font-weight: 500;
}
/* ===== Título com brilho sutil “marquee” ===== */
.titulo-quem-somos h2{
position: relative; display:inline-block; padding:0 .2em;
}
.titulo-quem-somos h2 .highlight-somos{
position:relative; z-index:1;
}
.titulo-quem-somos h2::after{
content:""; position:absolute; inset:-4px -6px; z-index:0;
background: linear-gradient(120deg, transparent 0 30%,
rgba(185,244,25,.35) 50%, transparent 70% 100%);
transform: translateX(-120%);
filter: blur(1px);
animation: sweep-quem 4s infinite ease-in-out;
}
@keyframes sweep-quem{
0%{ transform: translateX(-120%) }
50%{ transform: translateX(20%) }
100%{ transform: translateX(120%) }
}
/* ===== Reveal com stagger ===== */
.reveal-quem{ opacity:0; transform: translateY(18px) scale(.98); }
.reveal-quem.revealed-quem{ opacity:1; transform:none; transition: .55s ease; }
.reveal-quem.revealed-quem:nth-child(2){ transition-delay: .06s }
.reveal-quem.revealed-quem:nth-child(3){ transition-delay: .12s }
.reveal-quem.revealed-quem:nth-child(4){ transition-delay: .18s }
.reveal-quem.revealed-quem:nth-child(5){ transition-delay: .24s }
/* ===== Cards dos sócios com hover vivo ===== */
.box-socio{
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.box-socio:hover{
transform: translateY(-6px) scale(1.015);
box-shadow: 0 14px 34px rgba(0,0,0,.16);
filter: saturate(1.05);
}
.centro-quem-somos{
animation: float-quem 8s ease-in-out infinite alternate;
}
@keyframes float-quem{
from{ transform: translateY(0) }
to{ transform: translateY(-6px) }
}
/* === HOVER VERDE (sem cinza) nos cards da seção "Quem Somos" === */
/* 1) tira o efeito cinza geral do card no hover */
.card-somos:hover{
filter: none !important; /* remove grayscale/brightness */
}
/* 2) losango (badge) fica verde neon ao passar o mouse/foco */
.card-somos:hover .badge-somos,
.card-somos:focus-within .badge-somos,
.badge-somos:hover{
background: var(--neon) !important;
border-color: var(--neon) !important;
box-shadow: 0 10px 26px rgba(185,244,25,.35);
}
/* 3) deixa o ícone/foto do losango branco no hover p/ ter contraste */
.card-somos:hover .badge-somos img,
.card-somos:focus-within .badge-somos img,
.badge-somos:hover img{
filter: invert(1) brightness(1.9) contrast(1.05);
}
/* (opcional) estado normal do losango, sem “cinzar” no hover do card */
.badge-somos{
background:#fff;
border:2px solid #d3d3d3;
}
/* remenda qualquer regra antiga que pinte de vermelho */
.badge-somos:hover{ background: var(--neon) !important; }
/* ===== QUEM SOMOS (refinado) ===== */
/* grid dos cards mais espaçado */
.grid-somos{
grid-template-columns: repeat(3, 1fr);
gap: 40px; /* mais espaço entre os losangos */
justify-items: center;
margin-bottom: 40px;
}
/* losango: sombra + detalhe verde */
.badge-somos{
width: 160px; height: 160px;
border: 2px solid #e3e3e3;
background: #fff;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
position: relative;
transition: all .25s ease;
}
.badge-somos::after{
content:"";
position:absolute; inset:0;
border:2px solid transparent;
border-radius:24px;
transition:.25s;
}
.card-somos:hover .badge-somos::after{
border-color: var(--neon); /* detalhe verde na borda */
}
.card-somos:hover .badge-somos{
background: var(--neon);
}
.card-somos:hover .badge-somos img{
filter: invert(1) brightness(2);
}
/* títulos dos cards */
.title-somos{
margin-top: 40px;
font-weight: 800;
font-size: 1.05rem;
color:#111;
position: relative;
}
.title-somos::after{
content:"";
display:block;
width: 40px; height: 3px;
margin: 8px auto 0;
background: var(--neon);
border-radius: 2px;
}
/* bloco de texto da direita */
.right-somos{
padding-left: 30px;
border-left: 4px solid var(--neon); /* detalhe lateral verde */
}
.heading-somos{
font-size: clamp(32px, 5vw, 46px);
font-weight: 800;
margin-bottom: 14px;
color:#111;
}
.heading-somos .highlight-somos{
background: var(--neon);
padding: 2px 6px;
border-radius: 4px;
}
/* parágrafos mais legíveis */
.text-somos{
color:#333;
line-height: 1.65;
font-size: 1rem;
margin-bottom: 1em;
}
/* responsivo */
@media(max-width:960px){
.grid-somos{ grid-template-columns: 1fr 1fr; gap:30px }
.right-somos{ border-left: none; padding-left:0; border-top:4px solid var(--neon); margin-top:30px; padding-top:20px; }
}
@media(max-width:640px){
.grid-somos{ grid-template-columns: 1fr; }
}
/* ===================== ANIMAÇÕES PVV ===================== */
/* estado inicial (fora de cena) */
.pvv-hero-pvv,
.pvv-card-pvv{
opacity: 0;
transform: translateY(24px) scale(.98);
filter: blur(3px);
}
/* quando entrar na tela */
.reveal-in{
animation: pvv-rise .7s cubic-bezier(.22,.9,.24,1) forwards;
}
@keyframes pvv-rise{
to{ opacity:1; transform:none; filter:blur(0) }
}
/* delay em cascata para os cards */
.pvv-card-pvv:nth-of-type(1).reveal-in{ animation-delay: .10s }
.pvv-card-pvv:nth-of-type(2).reveal-in{ animation-delay: .22s }
/* brilho “neon sweep” nas palavras marcadas ( já usa --pvv-green/--neon) */
.pvv-hero-sub-pvv span,
.pvv-card-text-pvv span{ position:relative; z-index:0 }
.pvv-hero-sub-pvv span::after,
.pvv-card-text-pvv span::after{
content:""; position:absolute; inset:-2px -4px;
background: linear-gradient(90deg, transparent 0 35%, rgba(185,244,25,.55) 50%, transparent 65% 100%);
transform: translateX(-120%);
filter: blur(.6px);
animation: pvv-sweep 2.8s ease-in-out infinite;
}
@keyframes pvv-sweep{
0%{ transform: translateX(-120%) }
50%{ transform: translateX(10%) }
100%{ transform: translateX(120%) }
}
/* ícone verde (badge) com “pulso” suave ao revelar */
.pvv-badge-pvv{
transform: translateZ(0);
}
.reveal-in .pvv-badge-pvv{
animation: pvv-pulse .7s .25s ease-out both;
}
@keyframes pvv-pulse{
0%{ transform: scale(.85) }
60%{ transform: scale(1.06) }
100%{ transform: scale(1) }
}
/* cantoneira verde do card “Valores” com efeito dobradura */
.pvv-card-pvv::after{ transform-origin: 100% 0 }
.reveal-in.pvv-card-pvv::after{
animation: pvv-fold .9s .35s cubic-bezier(.17,.84,.3,1) both;
}
@keyframes pvv-fold{
0%{ transform: rotate(65deg) scale(.6); opacity:.0 }
60%{ opacity:.85 }
100%{ transform: rotate(45deg) scale(1); opacity:1 }
}
/* hover sutil mantido */
.pvv-card-pvv:hover{
transform: translateY(-4px);
}
/* parallax bem leve no fundo do bloco */
.pvv-main-pvv{ will-change: background-position; transition: background-position .1s linear; }
/* ===== Hover com deslocamento/tilt + glare ===== */
.pvv-hero-pvv,
.pvv-card-pvv{
will-change: transform, filter;
transform-style: preserve-3d;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
perspective: 1000px;
position: relative;
}
/* brilho que acompanha o cursor */
.pvv-hero-pvv::before,
.pvv-card-pvv::before{
content:"";
position:absolute; inset:0;
pointer-events:none;
background: radial-gradient(350px 220px at var(--gx,50%) var(--gy,50%),
rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
opacity: var(--gop, 0);
transition: opacity .2s ease;
border-radius: inherit;
}
/* estado hover “ligado” */
.pvv-hero-pvv.is-tilting,
.pvv-card-pvv.is-tilting{
box-shadow: 0 16px 44px rgba(0,0,0,.18);
filter: saturate(1.03);
}
.pvv-hero-pvv.is-tilting::before,
.pvv-card-pvv.is-tilting::before{ --gop: 1; }
/* fallback para quem prefere menos movimento ou pointer grosseiro */
@media (prefers-reduced-motion: reduce), (pointer: coarse){
.pvv-hero-pvv, .pvv-card-pvv{ transition: box-shadow .18s ease }
.pvv-hero-pvv::before, .pvv-card-pvv::before{ display:none }
}
/* === Aumentar tamanho dos boxes === */
.pvv-hero-pvv,
.pvv-card-pvv {
border-radius: 20px;
padding: 20px 30px; /* aumenta o espaço interno */
min-height: 220px; /* altura mínima maior */
transition: all .25s ease;
}
/* === Fundo cinza no hover === */
.pvv-hero-pvv:hover,
.pvv-card-pvv:hover {
background: #f3f3f3 !important; /* cinza claro */
box-shadow: 0 10px 26px rgba(0,0,0,.12);
transform: translateY(-4px); /* leve deslocamento elegante */
}
/* garante que qualquer efeito antigo de vidro/gradiente seja removido no hover */
.pvv-hero-pvv:hover::before,
.pvv-hero-pvv:hover::after,
.pvv-card-pvv:hover::before,
.pvv-card-pvv:hover::after {
display: none !important;
}
/* ========= LOADING (Quem Somos) ========= */
@keyframes shimmer-quem {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* ativa o estado de carregamento colocando .loading-somos em .main-somos */
.main-somos.loading-somos .wrap-somos { position: relative; }
/* Skeleton base */
.main-somos.loading-somos .skeleton,
.main-somos.loading-somos .badge-somos,
.main-somos.loading-somos .title-somos,
.main-somos.loading-somos .desc-somos,
.main-somos.loading-somos .right-somos h2,
.main-somos.loading-somos .right-somos p,
.main-somos.loading-somos .heading-somos {
color: transparent !important;
pointer-events: none;
user-select: none;
background: linear-gradient(90deg,
#eaeef3 0%,
#f4f7fb 40%,
#eaeef3 80%) no-repeat;
background-size: 200% 100%;
animation: shimmer-quem 1.4s linear infinite;
border-radius: 8px;
}
/* ajustes de dimensões dos skeletons */
.main-somos.loading-somos .badge-somos{
width: 160px; height: 160px; border:0; transform: rotate(0deg);
}
.main-somos.loading-somos .badge-somos img{ display:none; }
.main-somos.loading-somos .title-somos{
display:block; height: 18px; width: 70%; margin: 22px auto 10px;
}
.main-somos.loading-somos .title-somos::after{ display:none !important; }
.main-somos.loading-somos .desc-somos{
height: 72px; width: 90%; margin: 0 auto;
}
.main-somos.loading-somos .right-somos h2{
display:block; height: 28px; width: 60%; margin: 0 0 16px 0;
}
.main-somos.loading-somos .right-somos p{
height: 16px; width: 100%; margin: 10px 0;
}
.main-somos.loading-somos .right-somos p:nth-of-type(2){ width: 92%; }
.main-somos.loading-somos .right-somos p:nth-of-type(3){ width: 85%; }
/* desliga enfeites durante loading */
.main-somos.loading-somos .card-somos:hover,
.main-somos.loading-somos .badge-somos::after,
.main-somos.loading-somos .right-somos { filter:none; box-shadow:none; }
/* ===== Entrada da direita — Quem Somos ===== */
@keyframes qs-slide-right {
from { opacity: 0; transform: translateX(46px); }
to { opacity: 1; transform: none; }
}
@keyframes qs-item {
from { opacity: 0; transform: translateX(26px); }
to { opacity: 1; transform: none; }
}
/* estado inicial */
.right-somos {
will-change: transform, opacity;
width: 80%;
margin: 0 10%;
text-align: justify;
}
.right-somos .stg {
opacity: 0;
transform: translateX(26px);
}
/* quando entrar na tela */
.right-somos.enter-right {
animation: qs-slide-right .7s cubic-bezier(.2,.9,.25,1) forwards;
}
.right-somos.enter-right .stg {
animation: qs-item .55s cubic-bezier(.2,.9,.25,1) forwards;
}
/* stagger simples */
.right-somos.enter-right .stg:nth-of-type(1){ animation-delay: .08s }
.right-somos.enter-right .stg:nth-of-type(2){ animation-delay: .16s }
.right-somos.enter-right .stg:nth-of-type(3){ animation-delay: .24s }
.right-somos.enter-right .stg:nth-of-type(4){ animation-delay: .32s }
/* acessibilidade */
@media (prefers-reduced-motion: reduce){
.right-somos,
.right-somos .stg { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.intes_quem{
margin-left: 40px;
}
.intes_quem li{
margin-bottom: 10px;
list-style: none;
}
.bolinha_verde{
width: 15px;
height: 15px;
border-radius: 50%;
background: #b9f419;
float: left;
margin-right: 10px;
margin-top: 3px;
}
/* ================== EMPRESAS PARCEIRAS ================== */
:root{
/* se já tiver variáveis no projeto, essas herdariam */
--parceira-green: var(--quem-green, #C7FF1A);
--parceira-text: var(--quem-text, #0f1220);
--parceira-muted: var(--quem-muted, #667085);
--parceira-line: var(--quem-line, #E9EDF3);
}
.empresas-parceiras{
position: relative;
isolation: isolate;
/* Fundo suave: gradiente + brilho radial */
background:
radial-gradient(60% 90% at 50% -10%, rgba(199,255,26,.06) 0%, transparent 70%),
linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
border-top: 1px solid var(--parceira-line);
border-bottom: 1px solid var(--parceira-line);
padding: 56px 0 64px;
}
.wrap-parceira{
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.head-parceira{
text-align: center;
margin: 0 0 26px;
}
.title-parceira{
margin: 0 0 10px;
font-weight: 800;
line-height: 1.1;
color: var(--parceira-text);
font-size: clamp(28px, 5vw, 44px);
}
.marker-parceira{
background: var(--parceira-green);
padding: .05em .28em;
border-radius: 8px;
box-decoration-break: clone; /* mantém o efeito se quebrar linha */
}
.sub-parceira{
margin: 0 auto;
max-width: 740px;
color: var(--parceira-muted);
font-size: clamp(14px, 2.2vw, 18px);
}
/* GRID de logos */
.grid-parceira{
display: grid;
grid-template-columns: repeat(5, minmax(120px, 1fr));
gap: clamp(14px, 2vw, 24px);
align-items: center;
justify-items: center;
margin-top: 22px;
}
@media (max-width: 1100px){
.grid-parceira{ grid-template-columns: repeat(4, minmax(120px,1fr)); }
}
@media (max-width: 820px){
.grid-parceira{ grid-template-columns: repeat(3, minmax(110px,1fr)); }
}
@media (max-width: 560px){
.grid-parceira{ grid-template-columns: repeat(2, minmax(110px,1fr)); }
}
/* Cada LOGO (mantém cor original, um pouco opaca; no hover cresce e fica 100%) */
.logo-parceira{
display: grid;
place-items: center;
height: clamp(70px, 10vw, 90px);
padding: 10px 14px;
border-radius: 14px;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
will-change: transform;
}
.logo-parceira img{
height: 100%;
width: auto;
object-fit: contain; /* mantém proporção original */
opacity: .70; /* levemente opaca, sem tirar a cor */
transition: transform .28s ease, opacity .28s ease, filter .28s ease;
pointer-events: none; /* clique é no link */
}
/* Hover/Focus: aumenta e volta 100% de opacidade/cor */
.logo-parceira:hover img,
.logo-parceira:focus-visible img{
opacity: 1;
transform: scale(1.08);
filter: none;
}
.logo-parceira:hover,
.logo-parceira:focus-visible{
background-color: rgba(15,18,32,.03);
box-shadow: 0 10px 24px rgba(15,18,32,.10);
outline: none;
}
:root{
--parceira-green: var(--quem-green, #C7FF1A);
--parceira-text: var(--quem-text, #0f1220);
--parceira-muted: var(--quem-muted, #667085);
}
/* ===== Seção com imagem de fundo ===== */
.empresas-parceiras{
position: relative;
isolation: isolate;
padding: 56px 0 64px;
/* IMAGEM DE FUNDO: troque pelo seu arquivo */
background-image:
linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,.88)), /* leve véu para leitura */
url("../images/esg-transporte.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed; /* parallax suave */
border-top: 1px solid rgba(15,18,32,.06);
border-bottom: 1px solid rgba(15,18,32,.06);
}
.wrap-parceira{ max-width:1280px; margin:0 auto; padding:0 20px; }
.head-parceira{ text-align:center; margin:0 0 24px; }
.title-parceira{
margin:0 0 10px; font-weight:800; line-height:1.1; color:var(--parceira-text);
font-size: clamp(28px, 5vw, 44px);
}
.marker-parceira{
background: var(--parceira-green);
padding: .06em .30em;
border-radius: 10px;
box-decoration-break: clone;
}
.sub-parceira{
margin:0 auto; max-width: 860px;
color: var(--parceira-muted);
font-size: clamp(14px, 2.2vw, 18px);
}
/* ===== Marquee (rolagem contínua) — FIX ===== */
.marquee-parceira{
position: relative;
overflow: hidden;
padding-block: 8px; /* evita corte vertical */
/* fade suave nas laterais sem “comer” as logos */
mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
}
/* Animamos a TRILHA inteira (que contém 2 grupos idênticos) */
.marquee-track-parceira{
display: flex;
align-items: center;
gap: clamp(56px, 6vw, 96px);
width: max-content; /* mede pelo conteúdo */
will-change: transform;
animation: parceira-scroll 28s linear infinite; /* ajuste a velocidade se quiser */
}
.marquee-track-parceira:hover{ animation-play-state: paused; }
/* Cada grupo é só um bloco de logos, sem animação própria */
.marquee-group-parceira{
display: flex;
align-items: center;
gap: inherit;
flex: 0 0 auto; /* não deixa encolher */
}
/* Move metade da trilha (como temos 2 grupos idênticos) */
@keyframes parceira-scroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
/* Logos: levemente opacas, no hover aumentam e ficam 100% */
.logo-parceira{
display: flex;
align-items: center;
justify-content: center;
height: clamp(56px, 8vw, 90px); /* altura consistente */
padding: 4px 8px;
border-radius: 10px;
transition: background-color .25s ease, box-shadow .25s ease;
}
.logo-parceira img{
height: 100%;
width: auto;
object-fit: contain;
opacity: .78;
transition: transform .28s ease, opacity .28s ease;
pointer-events: none;
}
.logo-parceira:hover img,
.logo-parceira:focus-visible img{
opacity: 1;
transform: scale(1.06);
}
.logo-parceira:hover,
.logo-parceira:focus-visible{
background: rgba(255,255,255,.55);
box-shadow: 0 8px 22px rgba(15,18,32,.12);
outline: none;
}
/* Acessibilidade: sem animação para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
.marquee-track-parceira{ animation: none; }
}
/* ===== AJUSTES: EMPRESAS PARCEIRAS (full-bleed + conteúdo 1100px) ===== */
/* Fundo ocupa a página inteira, mesmo se o site tiver containers */
.empresas-parceiras{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
/* mantém o seu overlay + imagem de fundo */
background-image:
linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,.88)),
url("../images/esg-transporte.jpg"); /* ajuste o caminho se precisar */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* parallax suave em desktop */
}
/* Conteúdo (título, subtítulo e marquee) limitado a 1100px */
.wrap-parceira{
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
/* (opcional) se quiser garantir o limite também nos blocos internos */
.head-parceira,
.marquee-parceira{
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
/* Mobile/iOS costuma “engasgar” com background-attachment: fixed */
@media (max-width: 1024px){
.empresas-parceiras{ background-attachment: scroll; }
}
/* ===== Topbar: spacing e botão ===== */
.topbar .wrap{
max-width:1200px;
margin:0 auto;
padding:.5rem 1rem;
display:flex; align-items:center; justify-content:space-between;
}
.topbar .left{
display:flex; align-items:center; gap:0;
}
.topbar .left .contact-item{
display:inline-flex; align-items:center; gap:.5rem;
color:#111; font-weight:700; text-decoration:none;
}
.topbar .left .contact-item:hover{ text-decoration:underline }
/* separador entre telefone e e-mail */
.topbar .left .sep{
width:1px; height:18px;
background:rgba(0,0,0,.28);
margin:0 14px;
display:inline-block;
}
/* botão “Área do Cliente” */
.btn-topbar{
display:inline-flex; align-items:center; justify-content:center;
height:36px; padding:0 16px;
background:#111; color:#fff; font-weight:800;
border-radius:10px; text-decoration:none; letter-spacing:.01em;
box-shadow:0 6px 16px rgba(0,0,0,.18);
transition: filter .18s ease, transform .06s ease, box-shadow .18s ease;
}
.btn-topbar:hover{ filter:brightness(1.06); transform:translateY(-1px) }
.btn-topbar:active{ transform:translateY(0) }
/* ===== Header: logo left, menu right ===== */
.nav{
/* antes você tinha 1fr auto 1fr; agora deixamos logo + área do menu */
grid-template-columns: auto 1fr;
align-items:center;
gap: 24px;
}
/* garante que o logo fique colado na esquerda */
.logo{ justify-self:start; }
/* empurra o menu para a direita */
.mainbar{
grid-column: 2 / 3;
display:flex; align-items:center; justify-content:flex-end; gap:1rem;
}
/* e o próprio UL fica alinhado à direita */
.menu{
display:flex; align-items:center; gap:1.4rem;
justify-content:flex-end;
}
/* header: 2 colunas (logo | menu) e tudo alinhado no centro */
.nav{
grid-template-columns: auto 1fr;
align-items: center;
gap: 24px;
padding-block: 14px; /* respira um pouco */
}
.logo{ display:flex; align-items:center; justify-self:start; }
.mainbar{
grid-column: 2 / 3;
display:flex; align-items:center; justify-content:flex-end; gap:1rem;
}
.menu{ display:flex; align-items:center; gap:1.4rem; justify-content:flex-end; }
.menu > li > a{ padding:.55rem .8rem; line-height:1; }
/* logo maior e branco sobre o banner */
.logo img{
height: clamp(52px, 6vw, 78px); /* ajuste de tamanho responsivo */
display:block;
transition: filter .18s ease, transform .18s ease;
filter: brightness(0) invert(1); /* tudo branco */
}
/* mantém branco mesmo quando passa o mouse no header */
.header:hover .logo img,
.header.open .logo img{
filter: brightness(0) invert(1) !important;
}
/* ao rolar (header fica sticky) > logo preto */
#header-wrap.sticky .logo img{
filter: brightness(0) invert(0) !important; /* preto */
}
/* opcional: leve realce no sticky */
#header-wrap.sticky .nav{ padding-block: 12px; }
/* === HEADER: logo à esquerda e menu à direita (mesma linha) === */
#header-wrap .nav{
display: grid;
grid-template-columns: auto 1fr; /* logo | menu */
align-items: center;
gap: 24px;
padding-block: 14px;
}
#header-wrap .logo{
grid-column: 1 / 2;
display: flex;
align-items: center;
}
#header-wrap .mainbar{
grid-column: 2 / 3;
display: flex;
align-items: center;
justify-content: flex-end; /* menu encostado à direita */
gap: 28px;
}
#header-wrap .menu{
display: flex;
align-items: center;
gap: 28px;
margin: 0;
}
/* === LOGO: tamanho + estados de cor === */
#header-wrap .logo img{
height: clamp(56px, 6vw, 80px); /* maior e responsivo */
display: block;
transition: filter .18s ease, transform .18s ease;
/* estado padrão (sobre o banner): branco */
filter: brightness(0) invert(1);
}
/* quando o header fica branco (hover/aberto) -> logo preto */
#header-wrap .header:hover .logo img,
#header-wrap .header.open .logo img{
/* preto puro */
filter: brightness(0) saturate(100%);
}
/* sticky (ao rolar) -> logo preto */
#header-wrap.sticky .logo img{
filter: brightness(0) saturate(100%);
}
/* opcional: ajusta um pouco o espaçamento vertical quando sticky */
#header-wrap.sticky .nav{ padding-block: 12px; }
/* ===== Menu mais compacto ===== */
#header-wrap .mainbar{
gap: 16px; /* era ~28px */
}
/* distância entre os itens do menu */
#header-wrap .menu{
gap: clamp(12px, 2vw, 18px); /* menor em desktop e responsivo */
}
/* reduz um pouco o “respiro” interno de cada link */
#header-wrap .menu > li > a{
padding: .30rem .40rem; /* era ~.45rem .60rem */
}
/* garante que não exista espaçamento herdado */
#header-wrap .menu > li{ margin: 0; }
/* Estado padrão (sobre a foto): logo branco */
#header-wrap .logo img{
filter: brightness(0) invert(1); /* deixa o arquivo preto/branco em branco */
transition: filter .2s ease;
}
/* Quando o header fica claro: logo preto */
#header-wrap.sticky .logo img, /* ao rolar (header sticky) */
#header-wrap .header:hover .logo img,/* ao passar o mouse no header */
#header-wrap .header.open .logo img /* se abrir dropdown/estado aberto */
{
filter: none !important; /* volta à cor original (preta) */
}
/* Logo branco por padrão (sobre a foto) */
#header-wrap .logo img{
filter: brightness(0) invert(1);
transition: filter .2s ease;
}
/* Fica PRETO quando:
- o header fica sticky (rolagem)
- o usuário passa o mouse no header
- o usuário passa o mouse no MENU (nav/.menu)
- o menu está focado via teclado (acessibilidade)
- um fallback por classe (.menu-hover) adicionada via JS
*/
#header-wrap.sticky .logo img,
#header-wrap .header:hover .logo img,
#header-wrap:has(.nav:hover) .logo img,
#header-wrap:has(.menu:hover) .logo img,
#header-wrap:has(.nav:focus-within) .logo img,
#header-wrap.menu-hover .logo img{
filter: none !important; /* preto */
}
/* ================= FOOTER NOVO ================= */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.easy-footer{
position:relative;
color:#eaeaea;
background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
overflow:hidden;
isolation:isolate;
}
/* faixa/cta */
.easy-footer__cta{
background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border-bottom:1px solid rgba(255,255,255,.06);
}
.easy-footer__cta .container{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:18px 20px;
}
.easy-footer__cta p{ margin:0; font-weight:800; letter-spacing:.02em; color:#fff }
.btn-neon{
display:inline-flex; align-items:center; justify-content:center;
height:44px; padding:0 18px; border-radius:12px;
background: var(--neon); color:#111; font-weight:900;
text-decoration:none; border:0; cursor:pointer;
box-shadow:0 10px 24px rgba(185,244,25,.25);
transition: transform .1s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-neon:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-neon:active{ transform:translateY(0) }
/* grid principal */
.easy-footer__grid{
display:grid;
grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
gap:32px;
padding:38px 0 26px;
}
.easy-footer h4{
margin:0 0 12px; font-size:1.05rem; font-weight:900; letter-spacing:.02em; color:#fff
}
/* coluna marca/contato */
.easy-footer__brand .brand img{
height:40px; display:block; filter:brightness(1.05) saturate(1.1);
margin-bottom:16px;
}
.easy-footer__brand .contact{ list-style:none; margin:0 0 16px; padding:0 }
.easy-footer__brand .contact li{
display:flex; gap:10px; align-items:flex-start; margin:8px 0; color:#d6d6d6
}
.easy-footer__brand .contact i{ min-width:18px; margin-top:3px; color:#bfbfbf }
.easy-footer__brand a{ color:#fff; text-decoration:none }
.easy-footer__brand a:hover{ text-decoration:underline }
/* links */
.easy-footer__links ul{ list-style:none; padding:0; margin:0 }
.easy-footer__links li{ margin:10px 0 }
.easy-footer__links a{
color:#d9d9d9; text-decoration:none; position:relative; padding-left:0;
transition: color .15s ease, transform .15s ease;
}
.easy-footer__links a:hover{
color:#fff; transform: translateX(2px);
}
.easy-footer__links a::before{
content:""; position:absolute; left:-12px; top:50%; width:6px; height:6px;
background:var(--neon); border-radius:2px; transform:translateY(-50%) scale(.0);
transition: transform .15s ease;
}
.easy-footer__links a:hover::before{ transform:translateY(-50%) scale(1) }
/* newsletter */
.easy-footer__newsletter p{ margin:.2rem 0 12px; color:#d2d2d2 }
.newsletter{
display:flex; gap:10px; align-items:center; margin-bottom:8px;
background:rgba(255,255,255,.04); padding:6px; border-radius:12px;
border:1px solid rgba(255,255,255,.06);
}
.newsletter input{
flex:1; min-width:0; height:40px; border:0; outline:0;
background:transparent; color:#fff; font:600 15px/1.2 Montserrat, sans-serif;
padding:0 10px;
}
.newsletter input::placeholder{ color:#cfcfcf }
.newsletter .btn-neon{ height:40px; padding:0 14px; border-radius:10px }
.easy-footer__newsletter small{ display:block; opacity:.7 }
/* social */
.easy-footer .social{ display:flex; gap:12px; margin-top:16px }
.easy-footer .social a{
width:44px; height:44px; border-radius:50%; display:inline-flex;
align-items:center; justify-content:center; color:#f1f1f1;
border:2px solid rgba(255,255,255,.22);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.easy-footer .social a:hover{
transform: translateY(-2px);
background: rgba(255,255,255,.06);
border-color: var(--neon);
color:#fff;
}
/* wheels decorativos */
.easy-footer .wheel{
position:absolute; opacity:.08; filter: blur(.4px);
pointer-events:none; user-select:none;
}
.easy-footer .wheel--left{ left:54%; top:10px; width:min(420px, 36vw) }
.easy-footer .wheel--right{ right:2%; top:12px; width:min(420px, 36vw) }
/* barra inferior */
.easy-footer__bottom{
border-top:1px solid rgba(255,255,255,.10);
padding:16px 0 20px; text-align:center; color:#f0f0f0; font-weight:700;
}
/* responsivo */
@media (max-width:1080px){
.easy-footer__grid{ grid-template-columns: 1.2fr 1fr 1fr; }
.easy-footer__newsletter{ grid-column: 1 / -1 }
.easy-footer .wheel--left{ left:40% }
}
@media (max-width:780px){
.easy-footer__grid{ grid-template-columns: 1fr; }
.easy-footer__cta .container{ flex-direction:column; text-align:center }
.easy-footer .wheel{ display:none; } /* evita sobreposição em mobile */
}
/* Camadas de fundo para crossfade */
.hero-dinamico { position: relative; overflow: hidden; }
.hero-dinamico .hero-bg{
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: opacity .5s ease;
pointer-events: none; /* não bloqueia cliques nos botões */
z-index: 1; /* atrás dos botões */
}
.hero-dinamico .hero-bg.base { opacity: 1; }
.hero-dinamico .hero-bg.top { opacity: 0; }
/* Quando a camada "top" é ativada, ela aparece por cima, faz o fade-in */
.hero-dinamico .hero-bg.top.show { opacity: 1; }
/* Botão ativo (opcional, só para feedback visual) */
.hero-dinamico .btn.active{
background: #b9f419;
color: #111;
transform: translateY(-4px);
}
/* ===== Losango verde de canto — seção Os Sócios ===== */
.quem-somos{
position: relative; /* para ancorar o ornamento */
overflow: hidden; /* corta o excesso do losango */
}
/* losango principal (quadrado girado) */
.quem-somos::before{
content:"";
position:absolute;
/* puxe um pouco para fora para ficar “entrando” na área */
left: -140px;
top: -140px;
width: 420px; /* tamanho do losango */
height: 420px;
background: var(--neon); /* mesmo verde da identidade */
transform: rotate(45deg); /* vira losango */
z-index: 0; /* atrás do conteúdo */
box-shadow: 0 10px 26px rgba(0,0,0,.08); /* sutil, opcional */
}
/* conteúdo acima do ornamento */
.quem-somos .titulo-quem-somos,
.quem-somos .centro-quem-somos{
position: relative;
z-index: 1;
}
/* responsivo: reduz o losango em telas menores */
@media (max-width: 1024px){
.quem-somos::before{
left: -160px; top: -160px;
width: 360px; height: 360px;
}
}
@media (max-width: 640px){
.quem-somos::before{
left: -170px; top: -170px;
width: 300px; height: 300px;
}
}
/* ===== Os Sócios — container arredondado + losango inteiro ===== */
.quem-somos{
/* já existia: mantive o fundo e tipografia */
background: var(--somos-bg);
padding: 60px 20px;
/* NOVO: cantos arredondados e sombra suave */
border-radius: 26px;
box-shadow: 0 10px 26px rgba(0,0,0,.08);
/* mantém o losango contido nos cantos arredondados */
position: relative;
overflow: hidden;
}
/* dimensões/offsets do losango (fácil de ajustar) */
.quem-somos{
--qs-diametro: 360px; /* tamanho do quadrado (antes de girar) */
--qs-left: -20px; /* empurra para a esquerda (+ ou - conforme desejar) */
--qs-top: -110px; /* empurra para cima (+ ou -) */
}
/* Losango verde de canto */
.quem-somos::before{
content:"";
position:absolute;
width: var(--qs-diametro);
height: var(--qs-diametro);
left: var(--qs-left);
top: var(--qs-top);
background: var(--neon);
transform: rotate(45deg);
z-index: 0;
box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
/* conteúdo acima do ornamento */
.quem-somos .titulo-quem-somos,
.quem-somos .centro-quem-somos{
position: relative;
z-index: 1;
}
/* responsivo: ajusta o losango p/ caber bem em telas menores */
@media (max-width: 1024px){
.quem-somos{
--qs-diametro: 300px;
--qs-left: -12px;
--qs-top: -95px;
}
}
@media (max-width: 640px){
.quem-somos{
--qs-diametro: 240px;
--qs-left: -8px;
--qs-top: -80px;
}
}
/* ==== OS SÓCIOS — cantos arredondados + losango inteiro ==== */
section.quem-somos{
position: relative !important;
background: var(--somos-bg) !important;
border-radius: 28px !important;
overflow: hidden !important; /* mantém o losango contido */
padding: 60px 20px; /* (preserva o seu espaçamento) */
}
/* controle do tamanho e da folga das pontas */
section.quem-somos{
--losango: 340px; /* lado do quadrado antes de girar */
--margem: 16px; /* distância da ponta às bordas do bloco */
}
/* losango verde (atrás do conteúdo), totalmente dentro do bloco */
section.quem-somos::before{
content: "" !important;
position: absolute !important;
width: var(--losango) !important;
height: var(--losango) !important;
/* fórmula p/ centralizar de modo que a ponta fique dentro:
left/top = d*(√2/2 - 1/2) + margem ≈ d*0.2071 + margem */
left: calc(var(--losango) * 0.2071 + var(--margem)) !important;
top: calc(var(--losango) * 0.2071 + var(--margem)) !important;
background: var(--neon) !important;
transform: rotate(45deg) !important;
z-index: 0 !important;
box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
/* conteúdo acima do ornamento */
section.quem-somos > *{ position: relative; z-index: 1; }
/* responsivo */
@media (max-width: 1024px){
section.quem-somos{ --losango: 300px; --margem: 14px; }
}
@media (max-width: 640px){
section.quem-somos{ --losango: 240px; --margem: 12px; }
}
/* ==== OS SÓCIOS — bloco arredondado com losango ==== */
section.quem-somos{
position: relative;
background: var(--somos-bg);
border-radius: 28px; /* arredonda todos os cantos */
overflow: hidden; /* garante que nada vaze */
padding: 80px 20px 60px; /* aumentei o top para "abaixar" o conteúdo */
margin-top: 40px; /* descola do bloco anterior */
}
/* Variáveis de controle */
section.quem-somos{
--losango: 260px; /* tamanho do losango */
--folga: 24px; /* distância da ponta da borda */
}
/* Losango verde */
section.quem-somos::before{
content:"";
position:absolute;
width: var(--losango);
height: var(--losango);
background: var(--neon);
transform: rotate(45deg);
top: calc(var(--folga) + var(--losango) * 0.2);
left: calc(var(--folga) + var(--losango) * 0.2);
z-index:0;
border-radius: 12px; /* arredonda levemente as pontas */
box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
/* Conteúdo por cima */
section.quem-somos > *{ position: relative; z-index:1; }
/* Responsivo */
@media(max-width: 768px){
section.quem-somos{ --losango: 200px; --folga: 14px; }
}
/* ==== OS SÓCIOS — arredondar, abaixar e mostrar o losango ==== */
.quem-somos{
position: relative;
background: var(--somos-bg);
border-radius: 28px; /* arredonda todos os cantos */
overflow: hidden; /* garante que nada vaze */
padding: 100px 24px 60px; /* aumenta o topo para “abaixar” o conteúdo */
margin-top: 32px; /* descola do bloco anterior */
}
/* Tamanho/posição do losango (todo dentro do bloco) */
.quem-somos::before{
content:"";
position:absolute;
width: 280px; /* ajuste se quiser maior/menor */
height: 280px;
background: var(--neon);
transform: rotate(45deg);
top: 28px; /* positivos = totalmente dentro do bloco */
left: 28px;
z-index:0;
border-radius: 12px; /* cantos do losango levemente arredondados */
box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
/* Garante que o conteúdo fique acima do losango */
.quem-somos > *{ position: relative; z-index: 1; }
/* Responsivo */
@media (max-width: 768px){
.quem-somos{ padding-top: 80px; }
.quem-somos::before{ width:220px; height:220px; top:20px; left:20px; }
}
/* ==== OS SÓCIOS — bloco com losango maior e cantos arredondados ==== */
.quem-somos{
position: relative;
background: var(--somos-bg);
border-radius: 36px; /* cantos mais arredondados do bloco */
overflow: hidden;
padding: 120px 24px 80px; /* mais espaço no topo e embaixo */
margin-top: 40px;
}
/* Losango verde bem maior e arredondado */
.quem-somos::before{
content:"";
position:absolute;
width: 480px; /* bem maior */
height: 480px;
background: var(--neon);
transform: rotate(45deg);
top: -80px; /* sobe um pouco */
left: -80px; /* encosta no canto */
z-index:0;
border-radius: 40px; /* arredonda as pontas do losango */
box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
/* Conteúdo acima do ornamento */
.quem-somos > *{ position: relative; z-index: 1; }
/* Responsivo */
@media (max-width: 768px){
.quem-somos::before{
width: 340px;
height: 340px;
top: -60px;
left: -60px;
border-radius: 28px;
}
}
.quem-somos{
position: relative;
background: var(--somos-bg);
border-radius: 36px;
overflow: hidden;
padding: 140px 24px 80px; /* mais espaço no topo */
margin-top: 40px;
}
/* Losango verde maior e mais para baixo */
.quem-somos::before{
content:"";
position:absolute;
width: 680px; /* aumentei o tamanho */
height: 680px;
background: var(--neon);
transform: rotate(45deg);
top: 140px; /* empurra mais para baixo */
left: -100px; /* encostado na esquerda */
z-index:0;
border-radius: 46px; /* arredondamento mais suave */
box-shadow: 0 14px 34px rgba(0,0,0,.15);
}
/* Conteúdo acima do ornamento */
.quem-somos > *{ position: relative; z-index: 1; }
/* Responsivo */
@media (max-width: 768px){
.quem-somos::before{
width: 380px;
height: 380px;
top: 20px; /* mantém mais baixo em telas pequenas */
left: -70px;
border-radius: 32px;
}
}
.quem-somos{
margin-top: 0px;
}
/* ====== INTRO GRID (substitui limita7/limita3) ====== */
.easy-intro-grid{
max-width:1200px; margin:40px auto 60px; padding:0 1rem;
display:grid; grid-template-columns: 1.5fr 1fr; gap:28px; align-items:center;
}
@media (max-width: 900px){
.easy-intro-grid{ grid-template-columns:1fr; gap:18px }
}
.easy-intro-text h1{
font-weight:900; line-height:1.05; margin:0 0 10px;
font-size: clamp(28px, 5.2vw, 46px);
}
.easy-intro-text p{ margin:0 0 12px; line-height:1.7; color:#2a2f36 }
.easy-intro-text span{ background:var(--neon); font-weight:800 }
.easy-item{ position:relative; padding-left:28px }
.easy-item .easy-dot{
position:absolute; left:0; top:.45em; width:14px; height:14px;
background:var(--neon); border-radius:50%;
box-shadow:0 0 0 6px rgba(185,244,25,.18);
}
.easy-intro-media img{
width:100%; display:block; border-radius:18px;
box-shadow:0 12px 28px rgba(15,18,32,.12);
}
/* ====== PLATAFORMA (substitui limita10) ====== */
.easy-platform{
position:relative; overflow:visible; z-index:1;
max-width:1200px; margin:40px auto 80px; padding:0 1rem 80px;
background:#fff; border-radius:22px;
}
.easy-platform img{ width:100%; display:block; border-radius:18px; box-shadow:0 12px 28px rgba(15,18,32,.10) }
.easy-platform-body{ margin-top:16px }
.easy-platform-body p{ margin:0 0 12px; line-height:1.75; color:#1f2328 }
.easy-platform-body span{ background:var(--neon); font-weight:800 }
/* Losango verde — tamanho 340px e 200px pra cima */
.easy-platform::after{
--size: 340px;
content:"";
position:absolute;
width: var(--size);
height: var(--size);
left: calc(var(--size) * -0.40); /* “entra” 40% pela esquerda */
bottom: 200px; /* sobe 200px em relação à base */
transform: rotate(45deg);
background: var(--neon, #b9f419);
border-radius: 32px;
box-shadow: 0 18px 36px rgba(0,0,0,.12);
pointer-events:none;
z-index:-1; /* atrás do conteúdo */
}
@media (max-width: 900px){
.easy-platform{ padding-bottom:60px }
.easy-platform::after{
--size: 260px;
bottom: 140px;
left: calc(var(--size) * -0.36);
}
}
@media (max-width: 560px){
.easy-platform::after{
--size: 200px;
bottom: 120px;
left: calc(var(--size) * -0.32);
}
}
/* —— Layout do bloco —— */
.pv-wrap{padding: clamp(32px,6vw,72px) 0; position: relative;}
.pv-grid{
max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px,4vw,40px);
align-items: center;
}
.pv-col--text{min-width: 0;}
.pv-col--media{position: relative; min-height: 360px;}
.pv-title{
font: 900 clamp(28px,5vw,52px)/1.06 "Montserrat", system-ui, sans-serif;
margin: 0 0 12px;
color:#121212;
}
.pv-mark{
background:#b9f419; padding: .06em .25em; border-radius: 4px; color:#111;
box-shadow: 0 .35em 0 #b9f419;
}
.pv-lead{color:#444; max-width: 62ch; margin: 10px 0 18px; font-weight:600}
.pv-bullets{list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px}
.pv-bullets li{
padding-left:22px; position:relative; color:#222
}
.pv-bullets li::before{
content:""; position:absolute; left:0; top:.55em; width:10px; height:10px;
border-radius:50%; background:#111;
}
/* —— CTAs —— */
.pv-ctas{display:flex; gap:12px; flex-wrap:wrap}
.btn{
--ring: rgba(185,244,25,.38);
display:inline-flex; align-items:center; gap:10px;
border-radius:12px; padding:12px 18px; font-weight:800;
text-decoration:none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
will-change: transform, box-shadow;
}
.btn svg{width:20px; height:20px; flex:0 0 auto}
.btn:active{transform: translateY(1px)}
.btn--primary{
background:#111; color:#fff; box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.btn--primary:hover{
box-shadow: 0 10px 34px var(--ring);
background:#0f0f0f; color:#fff;
}
.btn--outline{
background:#fff; color:#111; border:2px solid #111;
}
.btn--outline:hover{
border-color:#b9f419; color:#0f0f0f; box-shadow: 0 8px 26px var(--ring);
}
/* —— Imagem direita (ajustes finos) —— */
.pv-figure{
position: relative; z-index: 2;
width: 100%; max-width: 520px;
max-height: min(70vh, 560px);
object-fit: contain; object-position: center;
display:block; margin: 0 0 0 auto;
filter: drop-shadow(0 12px 30px rgba(0,0,0,.08));
animation: pvFloat 8s ease-in-out infinite;
}
/* shape suave ao fundo */
.pv-shape{
position:absolute; inset:auto 0 0 0; height: 220px; z-index:1
}
/* fundo ocupa 100% da página (altura da viewport) */
.section-servico{
position: relative;
min-height: 100vh; /* ocupa a tela inteira */
width: 100%;
background-size: cover; /* cobre toda a área */
background-position: center; /* centraliza a imagem */
background-repeat: no-repeat;
display: grid;
place-items: center;
padding: clamp(32px,5vw,60px) 20px;
}
/* opcional: leve overlay para contraste do texto */
.section-servico::before{
content:"";
position:absolute; inset:0;
background: radial-gradient(80% 60% at 20% 30%, rgba(0,0,0,.18), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0));
pointer-events:none;
}
.section-servico .grid-servico{
position: relative; z-index: 1;
}
/* se já possuir estilos para .card-servico/.icon-servico, mantém;
abaixo apenas reforços suaves */
.card-servico{backdrop-filter: blur(3px);}
.icon-servico svg{width:32px;height:32px}
/* seção ocupa largura total da viewport */
.section-home{
position: relative;
width: 100vw;
min-height: auto; /* não força altura cheia */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
/* padding mais enxuto */
padding: 40px 20px; /* antes era clamp(32px,5vw,60px) */
}
.section-home::before{
content:"";
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.0));
pointer-events:none;
}
/* grid central */
.grid-home{
max-width: 1200px;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
gap: 28px;
position: relative;
z-index: 1;
}
/* card */
.card-home{
background: #fff;
border-radius: 20px;
padding: 34px 24px 38px;
text-align: center;
box-shadow: 0 12px 30px rgba(0,0,0,.12);
transition: transform .25s ease, box-shadow .25s ease;
}
.card-home:hover{
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
/* ícones */
.iconWrap-home{
display: grid; place-items:center;
margin: 0 auto 18px;
width: 86px; height: 86px;
border-radius: 22px;
background: #f8f9fa;
}
.icon-home svg{
width: 40px; height: 40px;
stroke: #111;
}
/* títulos e textos */
.title-home{
font: 900 1.2rem/1.2 "Montserrat", sans-serif;
margin: 0 0 10px; color:#111;
}
.accent-home{
width: 40px; height: 3px;
margin: 0 auto 14px;
background: var(--home-green, #b9f419);
border-radius: 2px;
}
.text-home{
color:#444; font-size:.95rem;
line-height:1.5;
}
/* ——— Losango com skeleton ——— */
.diamond-home{
/* tamanho base */
width: clamp(260px, 30vw, 520px);
aspect-ratio: 1/1;
/* vira losango */
transform: rotate(45deg);
border-radius: 26px;
overflow: hidden;
position: relative;
/* sombra suave + “flutuar” */
filter: drop-shadow(0 18px 40px rgba(0,0,0,.12));
animation: diamondFloat 8s ease-in-out infinite;
}
/* imagem dentro volta ao ângulo normal */
.diamond-img{
width: 100%;
height: 100%;
object-fit: contain;
transform: rotate(-45deg) scale(.96);
display: block;
opacity: 0;
transition: opacity .45s ease, transform .45s ease;
}
/* skeleton/shimmer enquanto carrega */
.diamond-loader{
position: absolute; inset: 0;
background:
linear-gradient(120deg,
rgba(255,255,255,.00) 0%,
rgba(255,255,255,.26) 30%,
rgba(255,255,255,.00) 60%) 0 0/200% 100%,
radial-gradient(60% 60% at 30% 30%, rgba(185,244,25,.18), transparent 60%),
linear-gradient(#eef1f4,#eef1f4);
animation: diamondShimmer 1.8s linear infinite;
transform: translateZ(0); /* perf */
}
/* quando carregar, some o loader e revela a imagem */
[data-diamond].is-loaded .diamond-loader{ display: none; }
[data-diamond].is-loaded .diamond-img{
opacity: 1;
transform: rotate(-45deg) scale(1);
}
/* ——— keyframes ——— */
@keyframes diamondShimmer{
0%{ background-position: -200% 0, 0 0, 0 0; }
100%{ background-position: 200% 0, 0 0, 0 0; }
}
@keyframes diamondFloat{
0%,100%{ transform: rotate(45deg) translateY(0) }
50%{ transform: rotate(45deg) translateY(-6px) }
}
/* responsivo (centraliza em telas menores) */
@media (max-width: 980px){
.pv-col--media{ display:grid; place-items:center; }
.diamond-home{ margin: 10px auto 0; }
}
/* —— container do losango —— */
.diamond-wrap-home{
/* tamanho responsivo */
width: clamp(260px, 30vw, 520px);
aspect-ratio: 1 / 1.35; /* ligeiramente alto, como no mock */
position: relative;
isolation: isolate; /* garante sobreposição correta */
background: #fff;
box-shadow: 0 18px 56px rgba(0,0,0,.12);
/* recorte em losango (com cantos levemente truncados) */
clip-path: polygon(
50% 0%, 88% 8%, 100% 18%, 100% 82%,
88% 92%, 50% 100%, 12% 92%, 0% 82%, 0% 18%, 12% 8%
);
overflow: hidden;
}
/* imagem dentro ocupa tudo e aparece com fade */
.diamond-img-home{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; /* preserva sua arte */
opacity: 0; transform: scale(.98);
transition: opacity .45s ease, transform .45s ease;
z-index: 2;
}
/* skeleton shimmer enquanto carrega */
.diamond-skeleton-home{
position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(80% 60% at 70% 20%, rgba(0,0,0,.06), transparent 60%) top/100% 100% no-repeat,
linear-gradient(120deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,.35) 45%,
rgba(255,255,255,0) 70%) 0 0/200% 100% no-repeat,
#f6f7f9;
animation: diamondShimmer 1.7s linear infinite;
/* mesma máscara do losango para não vazar em alguns browsers */
-webkit-clip-path: inherit; clip-path: inherit;
}
/* quando carregar, some o skeleton e mostra a imagem */
[data-diamond].is-ready .diamond-skeleton-home{ display: none; }
[data-diamond].is-ready .diamond-img-home{ opacity: 1; transform: scale(1); }
/* brilho animado */
@keyframes diamondShimmer{
from { background-position: 0 0, -200% 0, 0 0; }
to { background-position: 0 0, 200% 0, 0 0; }
}
/* responsivo: centraliza o losango quando a grade empilhar */
@media (max-width: 980px){
.pv-col--media{ display:grid; place-items:center; }
.diamond-wrap-home{ width: min(76vw, 520px); }
}
/* wrapper externo: controla tamanho e sombra */
.diamond2-home{
width: clamp(260px, 30vw, 520px);
aspect-ratio: 1 / 1; /* quadrado perfeito */
position: relative;
filter: drop-shadow(0 18px 40px rgba(0,0,0,.12));
}
/* losango real: rotaciona o quadrado interno */
.diamond2-rot{
position:absolute; inset:0;
background:#fff;
border-radius:24px;
overflow:hidden;
transform: rotate(45deg); /* vira losango */
}
/* SKELETON enquanto carrega */
.diamond2-skel{
position:absolute; inset:0;
background:
linear-gradient(120deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,.32) 45%,
rgba(255,255,255,0) 70%) 0 0/200% 100% no-repeat,
#eef1f4;
animation: d2Shimmer 1.6s linear infinite;
}
@keyframes d2Shimmer{ from{background-position:-200% 0} to{background-position:200% 0} }
/* imagem: “des-rotacionada” e ampliada pra cobrir os cantos do losango */
.diamond2-img{
position:absolute; left:50%; top:50%;
width:140%; height:140%; /* cobre os vértices após a rotação */
transform: translate(-50%,-50%) rotate(-45deg) scale(.98);
object-fit: contain; /* preserva sua arte */
opacity:0;
transition: opacity .45s ease, transform .45s ease;
}
/* quando carregar, some o skeleton e mostra a imagem */
[data-diamond].is-ready .diamond2-skel{ display:none; }
[data-diamond].is-ready .diamond2-img{ opacity:1; transform: translate(-50%,-50%) rotate(-45deg) scale(1); }
/* responsivo: centraliza */
@media (max-width: 980px){
.pv-col--media{ display:grid; place-items:center; }
}
/* GRID dessa dobra — dá mais respiro entre texto e mídia
e garante que nada seja cortado */
.pv-grid{
grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1fr);
column-gap: clamp(32px, 5vw, 72px);
overflow: visible; /* nada corta */
}
.pv-col--text{ position: relative; z-index: 2; } /* texto por cima */
.pv-col--media{
position: relative;
overflow: visible; /* deixa o losango “respirar” */
min-height: 460px; /* evita cortar em cima/baixo */
}
/* ——— Losango “à prova de corte” ——— */
.diamond2-home{
width: clamp(260px, 28vw, 420px); /* ↓ menor em todas as telas */
aspect-ratio: 1 / 1;
position: relative;
filter: drop-shadow(0 28px 80px rgba(0,0,0,.14));
transform: translateX(6%); /* empurra um pouco pra fora do texto */
}
.diamond2-rot{
position:absolute; inset:0;
background:#fff;
border-radius: 56px; /* CANTOS MAIS ARREDONDADOS */
overflow:hidden;
transform: rotate(45deg);
box-shadow: 0 20px 60px rgba(0,0,0,.08) inset;
}
/* sombra externa suave sem cortar (fica atrás do losango) */
.diamond2-home::after{
content:"";
position:absolute; inset:-10%;
transform: rotate(45deg);
border-radius: 64px;
box-shadow: 0 40px 120px rgba(0,0,0,.18);
z-index: 0;
}
/* skeleton */
.diamond2-skel{
position:absolute; inset:0; z-index:1;
background:
linear-gradient(120deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,.32) 45%,
rgba(255,255,255,0) 70%) 0 0/200% 100% no-repeat,
#eef1f4;
animation: d2Shimmer 1.6s linear infinite;
}
@keyframes d2Shimmer{ from{background-position:-200% 0} to{background-position:200% 0} }
/* imagem “des-rotacionada” e AMPLIADA pra nunca cortar os vértices */
.diamond2-img{
position:absolute; left:50%; top:50%;
width: 155%; height: 155%; /* <— cobre o losango inteiro */
transform: translate(-50%,-50%) rotate(-45deg) scale(.98);
object-fit: contain;
opacity:0; transition: opacity .45s ease, transform .45s ease;
z-index: 2;
}
[data-diamond].is-ready .diamond2-skel{ display:none; }
[data-diamond].is-ready .diamond2-img{
opacity:1; transform: translate(-50%,-50%) rotate(-45deg) scale(1);
}
/* responsivo: centraliza e reduz um pouco pra caber melhor */
@media (max-width: 1024px){
.diamond2-home{ transform:none; width:min(72vw, 560px); margin: 0 auto; }
}
.nav-toggle{
display: none;
}
/* ===== ODS HOME (fundo 100% sem conflitar) ===== */
.ods-home{
position: relative;
width: 100vw; /* full width */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #e9ecef center/cover no-repeat;
padding: clamp(28px,5vw,56px) 0;
overflow: visible;
}
.ods-home__inner{
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
display: grid;
grid-template-columns: 1.1fr .9fr;
column-gap: clamp(18px,4vw,40px);
align-items: center;
}
/* Painel destaque */
.ods-home__hero{
height: clamp(240px, 36vw, 360px);
border-radius: 22px;
background: #fff center/cover no-repeat;
box-shadow: 0 18px 40px rgba(0,0,0,.10);
position: relative;
overflow: hidden;
}
.ods-home__hero-mask{
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.05), rgba(0,0,0,0));
padding: clamp(18px,3.5vw,28px);
display: grid; align-content: center; gap: 10px;
color: #fff;
text-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.ods-home__hero-title{
margin: 0; font: 900 clamp(18px,3.2vw,28px)/1.12 "Montserrat",system-ui;
}
.ods-home__hero-desc{
margin: 0; max-width: 44ch; font-weight:600;
}
/* Rail de ícones */
.ods-home__rail{
display: grid;
grid-template-columns: repeat(2, minmax(120px, 1fr));
gap: clamp(10px,1.8vw,16px);
justify-items: center;
}
.ods-home__item{
width: clamp(110px, 12vw, 150px);
aspect-ratio: 1/1;
border-radius: 16px;
background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
display: grid; place-items: center;
border: 3px solid transparent;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ods-home__item img{ width: 68%; height: 68%; object-fit: contain; }
.ods-home__item:hover{ transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.ods-home__item.is-active{ border-color: #b9f419; }
/* Navegação */
.ods-home__nav{
position: absolute; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; border-radius: 999px;
border: 0; background:#fff; box-shadow: 0 6px 18px rgba(0,0,0,.18);
font: 900 18px/1 system-ui; cursor: pointer;
}
.ods-home__nav--prev{ right: calc(50% + 8px); } /* entre o hero e o grid */
.ods-home__nav--next{ right: 10px; }
/* Responsivo */
@media (max-width: 980px){
.ods-home__inner{ grid-template-columns: 1fr; row-gap: 18px; }
.ods-home__nav--prev{ left: 14px; right: auto; }
.ods-home__nav--next{ right: 14px; }
.ods-home__rail{ grid-template-columns: repeat(4, minmax(88px,1fr)); }
.ods-home__hero{ height: clamp(220px, 46vw, 320px); }
}
@media (max-width: 560px){
.ods-home__rail{ grid-template-columns: repeat(3, minmax(82px,1fr)); }
.ods-home{ padding-left: 10px; padding-right: 10px; }
}
/* --- HERO base --- */
.hero-dinamico{
position: relative;
min-height: clamp(420px, 58vw, 680px);
background: center/cover no-repeat;
display: flex;
align-items: center;
overflow: visible;
}
.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:120px }
/* canvas de bolhas */
#heroDots{
position:absolute; inset:0;
width:100%; height:100%;
pointer-events:none; z-index:1;
}
/* container central */
.hero-inner{
position:relative; z-index:2;
width:100%; max-width:1200px; margin:0 auto; padding:0 1rem;
display:flex; justify-content:flex-start;
}
/* GLASS CARD do texto */
.hero-glass{
width:min(740px, 56%);
background: rgba(255,255,255,.60);
border: 1px solid rgba(255,255,255,.45);
border-radius: 28px;
padding: clamp(18px,3.2vw,34px);
box-shadow: 0 24px 60px rgba(0,0,0,.18);
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
}
/* tipografia hero */
.hero-title{
font: 900 clamp(34px,6vw,64px)/1.02 Montserrat, system-ui, sans-serif;
color:#111; margin:0 0 10px;
}
.mark-green{
background:#b9f419; box-shadow:0 .35em 0 #b9f419; padding:0 .18em; border-radius:4px; color:#111;
}
.hero-sub{
color:#1e1e1e; font-weight:600; margin:0 0 16px; max-width:70ch;
}
/* botões (usa seu sistema; extra: variações) */
.btn{ display:inline-flex; align-items:center; gap:10px; border-radius:12px; padding:12px 18px; font-weight:800; text-decoration:none; transition:.2s; }
.btn--primary{ background:#111; color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.18)}
/* garante que nada corte */
.hero-dinamico{ overflow: visible; }
/* ===== Cartão inclinado (estilo da imagem 2) ===== */
.hero-tilt{
position: relative;
z-index: 2;
/* tamanho e posição */
width: min(820px, 62vw);
transform: rotate(-12deg);
margin: clamp(28px,4vw,48px) 0;
/* “vidro” translúcido */
background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.45));
border: 1px solid rgba(255,255,255,.55);
backdrop-filter: blur(12px) saturate(1.15);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
/* cantos super arredondados e orgânicos */
border-radius: 42px 260px 42px 260px / 42px 260px 42px 260px;
/* sombra suave ao redor */
box-shadow:
0 28px 80px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.6);
overflow: visible;
}
/* brilho/halo externo opcional como no exemplo */
.hero-tilt::after{
content:"";
position:absolute; inset:-8%;
transform: rotate(0); /* segue a rotação do pai */
border-radius: inherit;
background: radial-gradient(60% 80% at 65% 30%, rgba(255,255,255,.5), transparent 70%);
filter: blur(18px);
z-index: -1;
}
/* conteudo “desinclinado” */
.hero-tilt__inner{
transform: rotate(12deg);
padding: clamp(18px,3.2vw,34px) clamp(20px,3.6vw,42px);
}
/* ajuste da tipografia dentro do tilt (um pouco menor que o hero original) */
.hero-tilt .hero-title{
font-size: clamp(32px,5.4vw,56px);
line-height: 1.04;
margin: 0 0 10px;
}
.hero-tilt .hero-sub{ margin: 0 0 16px; }
/* responsivo: tira a inclinação em telas pequenas para caber melhor */
@media (max-width: 820px){
.hero-tilt{
width: min(92vw, 760px);
transform: none;
border-radius: 28px;
}
.hero-tilt__inner{ transform: none; }
}
/* garante que nada corte o cartão */
.hero-dinamico{ overflow: visible; }
.hero-inner{ justify-content: flex-start; }
/* --- transforma o .hero-glass no cartão inclinado tipo ambipar --- */
.hero-glass{
position: relative;
z-index: 2;
width: min(820px, 62vw); /* tamanho do cartão */
padding: clamp(18px,3.2vw,34px) clamp(20px,3.6vw,42px);
background: transparent; /* o vidro virá no ::before */
border: 0;
}
.hero-glass > *{ position: relative; z-index: 1; } /* conteúdo sempre por cima */
/* a forma translúcida inclinada */
.hero-glass::before{
content:"";
position: absolute;
/* aumentar um pouco pra compensar a rotação e não cortar */
inset: -6% -8% -6% -4%;
transform: rotate(-12deg);
transform-origin: 20% 40%;
border-radius: 48px 300px 48px 300px / 48px 300px 48px 300px; /* cantos orgânicos grandes */
/* vidro translúcido */
background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
border: 1px solid rgba(255,255,255,.55);
backdrop-filter: blur(12px) saturate(1.15);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
/* sombras */
box-shadow:
0 28px 80px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.6);
pointer-events: none;
z-index: 0;
}
/* título e subtítulo do hero dentro do cartão */
.hero-title{
font-size: clamp(32px,5.6vw,56px);
line-height: 1.04;
color:#111;
margin: 0 0 10px;
}
.hero-sub{ color:#1e1e1e; font-weight:600; margin:0 0 16px; }
/* responsivo: desinclina no mobile p/ caber melhor */
@media (max-width: 820px){
.hero-glass{ width: min(92vw, 760px); }
.hero-glass::before{
inset: 0;
transform: none;
border-radius: 28px;
}
}
/* container do hero ocupando 100% e SEM margem à esquerda */
.hero-inner{
position: relative; z-index: 2;
width: 100%;
margin: 0; /* <-- margin-left: 0 */
max-width: none; /* não centraliza */
padding: 0; /* remove aquele 1rem da esquerda */
display: flex;
justify-content: flex-start;
}
/* cartão base (mantém seu conteúdo) */
.hero-glass{
position: relative;
margin-left: 0; /* garante colado na borda */
padding: clamp(18px,3.2vw,34px) clamp(22px,3.6vw,40px);
}
/* forma de LOSANGO translúcida atrás do conteúdo */
.hero-glass::before{
content:"";
position:absolute; left:0; top:0;
width: min(880px, 64vw);
height: min(520px, 42vw);
z-index: 0;
/* recorte em losango (diamond) com “ponta” à direita */
clip-path: polygon(0 8%, 70% 8%, 95% 50%, 70% 92%, 0 92%);
/* vidro translúcido */
background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.42));
border: 1px solid rgba(255,255,255,.55);
backdrop-filter: blur(12px) saturate(1.15);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
border-radius: 26px; /* dá uma leve suavizada nas bordas do losango */
/* sombra suave */
box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.6);
pointer-events: none;
}
/* conteúdo sempre por cima da forma */
.hero-glass > *{ position: relative; z-index: 1; text-align: left; }
/* responsivo: em telas pequenas tira o losango e vira cartão retangular */
@media (max-width: 820px){
.hero-glass::before{
clip-path: none;
width: min(92vw, 760px);
height: auto; inset: 0;
border-radius: 28px;
}
}
/* garanta que nada corte o shape */
.hero-dinamico,
.hero-inner,
.hero-glass { overflow: visible; }
.hero-inner{
position:relative; z-index:2; width:100%;
margin:0; max-width:none; padding:0;
display:flex; justify-content:flex-start;
}
/* conteúdo do cartão */
.hero-glass{
position:relative;
margin-left:0; /* encostado na lateral */
padding: clamp(18px,3.2vw,34px) clamp(22px,3.6vw,40px);
}
/* ===== FUNDO RETANGULAR ARREDONDADO E TOMBADO ===== */
.hero-glass::before{
content:"";
position:absolute;
/* posicione um pouquinho pra esquerda/cima pra encaixar sob o título */
left: -18px;
top: -26px;
/* tamanho do “quadrado” (retângulo) responsivo */
width: clamp(640px, 62vw, 980px);
height: clamp(280px, 38vw, 460px);
/* bordas arredondadas + inclinação (tombado) */
border-radius: 36px;
transform: rotate(-10deg);
transform-origin: 12% 28%;
/* vidro translúcido */
background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.46));
border: 1px solid rgba(255,255,255,.58);
backdrop-filter: blur(12px) saturate(1.15);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
/* sombreamento para destacar do background */
box-shadow:
0 28px 80px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.65);
pointer-events:none; z-index:0;
}
/* mantém o texto e botões por cima do shape */
.hero-glass > *{ position:relative; z-index:1; text-align:left; }
/* fallback se o navegador não suportar backdrop-filter */
@supports not (backdrop-filter: blur(8px)){
.hero-glass::before{ background: rgba(255,255,255,.78); }
}
/* Mobile: retângulo sem rotação para caber melhor */
@media (max-width: 820px){
.hero-glass::before{
left:0; top:0; width:min(92vw,760px); height:auto;
transform:none; border-radius:28px;
}
}
/* Hero sem container centralizado e sem cortes */
.hero-dinamico{ position:relative; min-height: clamp(420px, 58vw, 680px); overflow: visible; }
.hero-inner{
position:relative; z-index:2; width:100%;
margin:0 !important; max-width:none !important; padding:0 !important;
display:flex; justify-content:flex-start;
}
/* base do bloco */
.hero-tilt{ position:relative; margin-left:0; overflow:visible; }
.hero-tilt::before{ display:none !important; } /* desliga shapes antigos, se existirem */
/* ===== FUNDO: retângulo arredondado e tombado ===== */
.hero-tilt-bg{
position:absolute; z-index:0; pointer-events:none;
left: -18px; /* encosta na lateral */
top: -26px;
width: clamp(640px, 62vw, 980px);
height: clamp(280px, 38vw, 460px);
border-radius: 36px; /* cantos arredondados */
transform: rotate(-10deg);
transform-origin: 12% 28%;
/* “vidro” translúcido */
background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.46));
border: 1px solid rgba(255,255,255,.58);
backdrop-filter: blur(12px) saturate(1.15);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
/* sombra para destacar */
box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.65);
}
/* Conteúdo “desinclinado” e por cima do fundo */
.hero-tilt__inner{
position:relative; z-index:1;
transform: rotate(10deg); /* anula a rotação do fundo */
padding: clamp(18px,3.2vw,34px) clamp(22px,3.6vw,40px);
max-width: min(820px, 64vw);
}
.hero-title{ margin:0 0 10px; text-align:left; }
.hero-sub{ margin:0 0 16px; text-align:left; }
/* Fallback se o navegador não suportar backdrop-filter */
@supports not (backdrop-filter: blur(8px)){
.hero-tilt-bg{ background: rgba(255,255,255,.78); }
}
/* Mobile: sem tombar para caber melhor */
@media (max-width: 820px){
.hero-tilt-bg{
left:0; top:0;
width: min(92vw, 760px);
height:auto;
transform:none;
border-radius: 28px;
}
.hero-tilt__inner{ transform:none; max-width: 92vw; }
}
/* não deixe nada cortar o shape e encoste à esquerda */
.hero-dinamico{ overflow: visible; }
.hero-inner{
position:relative; z-index:2; width:100%;
margin:0 !important; max-width:none !important; padding:0 !important;
display:flex; justify-content:flex-start;
}
.hero-tilt{ position:relative; margin-left:0; overflow:visible; }
/* desliga QUALQUER pseudo antigo (triângulos/losangos etc.) */
.hero-tilt::before, .hero-tilt::after,
.hero-glass::before, .hero-glass::after { display:none !important; }
/* ===== FUNDO RETANGULAR ARREDONDADO E TOMBADO ===== */
.hero-tilt-bg{
position:absolute; z-index:0; pointer-events:none;
left:-22px; /* encosta na lateral */
top:-24px;
width:clamp(640px, 60vw, 920px);
height:clamp(280px, 36vw, 440px);
border-radius:36px; /* cantos arredondados */
transform:rotate(-12deg); /* “tombado” */
transform-origin:12% 28%;
/* vidro translúcido */
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.50));
border:1px solid rgba(255,255,255,.58);
backdrop-filter: blur(12px) saturate(1.15);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.65);
}
/* conteúdo fica reto por cima do fundo */
.hero-tilt__inner{
position:relative; z-index:1;
transform:rotate(12deg); /* anula a rotação do fundo */
padding:clamp(18px,3.2vw,34px) clamp(22px,3.6vw,40px);
max-width:min(820px, 64vw);
text-align:left;
}
@supports not (backdrop-filter: blur(8px)){
.hero-tilt-bg{ background: rgba(255,255,255,.82); }
}
/* mobile: sem tombar para caber melhor */
@media (max-width:820px){
.hero-tilt-bg{
left:0; top:0; width:min(92vw,760px); height:auto;
transform:none; border-radius:28px;
}
.hero-tilt__inner{ transform:none; max-width:92vw; }
}
/* ===== HERO base ===== */
.hero-dinamico{
position: relative;
min-height: clamp(460px, 58vw, 720px);
overflow: visible;
}
/* Fundo SEM CORTAR: imagem em ![]()
com contain
+ um preenchimento borrado atrás para não ficar “barras” */
.hero-bg-img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; /* <— não corta */
object-position: center;
z-index: 0;
}
.hero-dinamico::before{
content:"";
position:absolute; inset:-3%;
background-image: var(--hero-bg);
background-size: cover; /* preenche tudo no borrado */
background-position: center;
filter: blur(18px) brightness(.95) saturate(.95);
transform: scale(1.04);
z-index: -1; /* fica atrás da imagem principal */
}
/* Container e card grudado à esquerda */
.hero-inner{
position: relative; z-index: 2;
width: 100%; margin: 0; max-width: none; padding: 0;
display: flex; justify-content: flex-start;
}
.hero-card{
margin-left: 0; /* encosta na lateral */
margin-top: clamp(16px, 3vw, 32px);
background: rgba(255,255,255,.70);
border: 1px solid rgba(255,255,255,.5);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
border-radius: 28px;
padding: clamp(18px, 3.2vw, 34px) clamp(22px, 3.6vw, 40px);
box-shadow: 0 24px 60px rgba(0,0,0,.18);
max-width: min(880px, 70vw);
}
/* Texto */
.hero-title{
margin: 0 0 10px;
font: 900 clamp(34px, 6vw, 68px)/1.02 "Montserrat", system-ui, sans-serif;
color: #111; text-align: left;
}
.hero-sub{ margin: 0 0 16px; color:#1d1d1d; font-weight: 600; text-align: left; }
.mark-green{
background:#b9f419; color:#111; border-radius:4px;
box-shadow: 0 .34em 0 #b9f419; padding: 0 .18em;
}
/* Botões (usa seu estilo base; só garantimos consistência) */
.btn{ display:inline-flex; align-items:center; gap:10px; border-radius:12px; padding:12px 18px; font-weight:800; text-decoration:none; transition:.2s; }
.btn--primary{ background:#111; color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.18); }
.btn--outline{ background:#fff; color:#111; border:2px solid #111; }
.btn--outline:hover{ border-color:#b9f419; box-shadow:0 8px 26px rgba(185,244,25,.35) }
/* ===== Loading • shimmer + revelação digitada ===== */
.hero-dinamico.is-loading .hero-title,
.hero-dinamico.is-loading .hero-sub{
color: transparent; position: relative;
}
.hero-dinamico.is-loading .hero-title::after,
.hero-dinamico.is-loading .hero-sub::after{
content:"";
position:absolute; inset:0; border-radius:8px;
background:
linear-gradient(100deg, rgba(255,255,255,0) 20%,
rgba(255,255,255,.6) 40%,
rgba(255,255,255,0) 60%) 0 0/200% 100%,
rgba(0,0,0,.15);
animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer{
to{ background-position: 200% 0, 0 0; }
}
/* animação “digitando” (stagger) */
[data-typer] span{ opacity:0; transform: translateY(.4em); display:inline-block; }
[data-typer].typer-ready span{ animation: typeIn .6s ease forwards; }
@keyframes typeIn{
to{ opacity:1; transform: translateY(0); }
}
/* Responsivo */
@media (max-width: 820px){
.hero-card{ max-width: 92vw; margin-left: 0; }
}
/* Título geral */
.hero-title{
margin: 0 0 clamp(10px,1.6vw,14px);
font-weight: 900;
line-height: 1.05;
text-align: left;
color: #111;
}
/* Faixa verde do “Plataforma de ESG” */
.hero-strip{
display: inline-block;
font-size: clamp(28px, 4.5vw, 54px);
padding: .06em .28em 0 .28em;
border-radius: 10px;
background: #b8f512;
color: #000;
box-shadow: 0 .28em 0 #b9f419;
}
/* Segunda linha (sem faixa) */
.hero-tail{
display: block;
margin-top: .14em;
font-size: clamp(28px, 4.5vw, 54px);
}
/* Parágrafo */
.hero-sub{
margin: clamp(10px,1.6vw,16px) 0;
color:#232323;
font-weight: 600;
max-width: 70ch;
text-align: left;
}
/* Card translúcido mais “leve” e proporcional */
.hero-card{
margin-left: 0;
margin-top: clamp(12px, 2.4vw, 24px);
max-width: min(780px, 70vw);
background: rgba(255,255,255,.72);
border: 1px solid rgba(255,255,255,.5);
border-radius: 24px;
padding: clamp(16px, 3vw, 28px) clamp(18px, 3.4vw, 34px);
backdrop-filter: blur(10px) saturate(1.05);
-webkit-backdrop-filter: blur(10px) saturate(1.05);
box-shadow: 0 20px 48px rgba(0,0,0,.16);
}
/* Botões: só um toque de equilíbrio */
.hero-buttons .btn{ margin-right: 10px; }
.hero-buttons .btn:last-child{ margin-right: 0; }
/* Card mais translúcido, leve e harmonioso */
.hero-card{
background: rgba(255,255,255,.30); /* ↓ mais transparente */
border: 1px solid rgba(255,255,255,.28);
border-radius: 24px;
backdrop-filter: blur(8px) saturate(1.05);
-webkit-backdrop-filter: blur(8px) saturate(1.05);
box-shadow: 0 16px 44px rgba(0,0,0,.14);
max-width: min(760px, 68vw);
padding: clamp(16px,3vw,28px) clamp(18px,3.4vw,34px);
position: relative;
overflow: visible;
}
/* Shape orgânico atrás do conteúdo */
.hero-card__shape{
position: absolute;
inset: -20px -26px -22px -10px; /* expande um pouco além do card */
z-index: 0;
filter: blur(0.0001px); /* evita serrilhado em alguns navegadores */
}
/* Garante conteúdo por cima do shape */
.hero-card > :not(.hero-card__shape){ position: relative; z-index: 1; }
.hero-tail{
display:block;
margin-top:.18em;
font-size: clamp(28px,4.4vw,52px);
}
/* Parágrafo */
.hero-sub{ margin: clamp(10px,1.6vw,16px) 0; color:#222; font-weight:600; max-width: 70ch; }
/* Botões com pequeno respiro entre eles */
.hero-buttons .btn{ margin-right:10px; }
.hero-buttons .btn:last-child{ margin-right:0; }
/* Fallback: se não houver suporte a backdrop-filter, aumenta um pouco a opacidade */
@supports not (backdrop-filter: blur(4px)){
.hero-card{ background: rgba(255,255,255,.42); }
}
/* Mobile: limita largura e mantém o shape encaixado */
@media (max-width: 820px){
.hero-card{ max-width: 92vw; }
.hero-card__shape{ inset: -14px -14px -14px -8px; }
}
/* ===== HERO base (fundo SEM cortar) ===== */
.hero-dinamico{
position:relative; min-height:clamp(460px,58vw,720px); overflow:visible;
}
.hero-bg-img{ /* imagem real – não corta */
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; object-position:center; z-index:0;
}
/* blur preenchendo as sobras atrás da imagem real */
.hero-dinamico::before{
content:""; position:absolute; inset:-3%;
background-image:var(--hero-bg); background-size:cover; background-position:center;
filter:blur(18px) brightness(.95) saturate(.95); transform:scale(1.04);
z-index:-1;
}
/* container e card colados à esquerda */
.hero-inner{
position:relative; z-index:2; width:100%; margin:0; max-width:none; padding:0;
display:flex; justify-content:flex-start;
}
.hero-card{
position:relative; margin-left:0; margin-top:clamp(12px,2.4vw,24px);
max-width:min(760px,68vw);
background:rgba(255,255,255,.30); /* mais transparente */
border:1px solid rgba(255,255,255,.28);
border-radius:24px; padding:clamp(16px,3vw,28px) clamp(18px,3.4vw,34px);
backdrop-filter:blur(8px) saturate(1.05); -webkit-backdrop-filter:blur(8px) saturate(1.05);
box-shadow:0 16px 44px rgba(0,0,0,.14);
overflow:visible;
}
/* shape orgânico atrás do conteúdo */
.hero-card__shape{
position:absolute; inset:-20px -26px -22px -10px; z-index:0;
filter:blur(.0001px);
}
.hero-card > *:not(.hero-card__shape){ position:relative; z-index:1; }
/* tipografia + faixa verde */
.hero-title{ margin:0 0 10px; font:900 clamp(34px,6vw,68px)/1.03 Montserrat,system-ui,sans-serif; color:#111; text-align:left }
.hero-tail{ display:block; margin-top:.14em; font-size:clamp(28px,4.5vw,54px) }
.hero-sub{ margin:clamp(10px,1.6vw,16px) 0; color:#232323; font-weight:600; max-width:70ch; text-align:left }
/* botões coerentes */
.hero-buttons{ display:flex; gap:12px }
.btn{ display:inline-flex; align-items:center; gap:10px; border-radius:12px; padding:12px 18px; font-weight:800; text-decoration:none; transition:.2s }
.btn--primary{ background:#111; color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.18) }
.btn--outline{ background:#fff; color:#111; border:2px solid #111 }
.btn--outline:hover{ border-color:#b9f419; box-shadow:0 8px 26px rgba(185,244,25,.35) }
/* ===== Loading + efeito “digitando” ===== */
.hero-dinamico.is-loading .hero-sub{ color:transparent; position:relative }
.hero-dinamico.is-loading .hero-sub::after{
content:""; position:absolute; inset:0; border-radius:8px;
background:
linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.6) 40%, rgba(255,255,255,0) 60%) 0 0/200% 100%,
rgba(0,0,0,.15);
animation:shimmer 1.2s linear infinite;
}
@keyframes shimmer { to{ background-position:200% 0, 0 0 } }
[data-typer] span{ opacity:0; transform:translateY(.4em); display:inline-block }
[data-typer].typer-ready span{ animation:typeIn .6s ease forwards }
@keyframes typeIn{ to{ opacity:1; transform:translateY(0) } }
/* mobile */
@media (max-width:820px){
.hero-card{ max-width:92vw }
}
/* mata qualquer shape antigo do hero */
.hero-tilt,
.hero-tilt__inner,
.hero-tilt-bg,
.hero-glass,
.hero-glass::before,
.hero-glass::after,
.hero-card__shape { display: none !important; }
/* fundo SEM cortar: imagem real + blur preenchendo as sobras */
.hero-dinamico{
position:relative; min-height:clamp(460px,58vw,720px); overflow:visible;
}
.hero-bg-img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; object-position:center; z-index:0;
}
/* blur de preenchimento */
.hero-dinamico::before{
content:""; position:absolute; inset:-3%;
background-image:var(--hero-bg); background-size:cover; background-position:center;
filter:blur(18px) brightness(.96) saturate(.95);
transform:scale(1.04); z-index:-1;
}
/* véu suave vindo da esquerda pra harmonizar com a foto */
.hero-dinamico::after{
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, rgba(255,255,255,.65) 0 32%, rgba(255,255,255,0) 64%);
pointer-events:none;
}
.hero-inner{
position:relative; z-index:2; width:100%;
margin:0; max-width:none; padding:0 20px; /* só 20px de respiro lateral */
display:flex; justify-content:flex-start;
}
/* CARD minimalista */
.hero-card{
margin: clamp(10px,2vw,20px) 0 0 0; /* colado à esquerda */
max-width:min(760px, 68vw);
background: rgba(255,255,255,.22);
border: 1px solid rgba(255,255,255,.28);
border-radius: 20px;
backdrop-filter: blur(8px) saturate(1.05);
-webkit-backdrop-filter: blur(8px) saturate(1.05);
box-shadow: 0 14px 36px rgba(0,0,0,.14);
padding: clamp(16px,3vw,28px) clamp(18px,3.4vw,34px);
}
/* TIPOGRAFIA */
.hero-title{
margin:0 0 8px;
font:900 clamp(30px,5vw,56px)/1.05 "Montserrat",system-ui,sans-serif;
color:#111; text-align:left;
}
.hero-tail{
display:block; margin-top:.12em;
font-size: clamp(26px,4.2vw,46px); font-weight:900;
}
.hero-sub{
margin: clamp(10px,1.6vw,16px) 0 0;
color:#232323; font-weight:600; max-width: 70ch;
text-align:left; text-wrap:balance;
}
/* BOTÕES */
.hero-buttons{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:10px; border-radius:12px; padding:12px 18px; font-weight:800; text-decoration:none; transition:.2s }
.btn--primary{ background:#111; color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.18) }
.btn--outline{ background:#fff; color:#111; border:2px solid #111 }
.btn--outline:hover{ border-color:#b9f419; box-shadow:0 8px 26px rgba(185,244,25,.35) }
/* RESPONSIVO: ocupa a largura com respiro, sem exagero de tamanho */
@media (max-width:820px){
.hero-inner{ padding:0 16px }
.hero-card{ max-width: 92vw }
}
/* shimmer leve no parágrafo enquanto carrega */
.hero-dinamico.is-loading .hero-sub{ color:transparent; position:relative }
.hero-dinamico.is-loading .hero-sub::after{
content:""; position:absolute; inset:0; border-radius:6px;
background:
linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.6) 40%, rgba(255,255,255,0) 60%) 0 0/200% 100%,
rgba(0,0,0,.15);
animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% 0, 0 0 } }
/* “digitando” (stagger) no parágrafo */
[data-typer] span{ opacity:0; transform:translateY(.35em); display:inline-block }
[data-typer].typer-ready span{ animation:typeIn .6s ease forwards }
@keyframes typeIn{ to{ opacity:1; transform:translateY(0) } }
.caminhao{
width: 100%;
margin-bottom: -10px;
}
.caminhao img{
width: 100%;
}
/* — HERO: limpar o box — */
.hero-card{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
max-width: min(760px, 68vw);
margin: clamp(12px,2vw,20px) 0 0 0; /* encosta à esquerda */
}
/* degradê de leitura por trás do conteúdo (não é box) */
.hero-dinamico::after{
z-index: 1; /* fica atrás do texto e do logo */
background: linear-gradient(90deg,
rgba(255,255,255,.62) 0 34%,
rgba(255,255,255,0) 70%);
}
/* garante texto acima do degradê */
.hero-inner{ position: relative; z-index: 2; }
.hero-title, .hero-sub, .hero-buttons{ text-align:left }
/* ===== ARTE DO HERO ===== */
.hero-art{
position:absolute; inset:0;
z-index:1; /* acima da foto, atrás do texto */
pointer-events:none;
}
.hero-ribbon{
opacity:.28;
transform-origin:50% 100%;
animation:heroRibbonFloat 8s ease-in-out infinite alternate;
will-change:transform;
}
@keyframes heroRibbonFloat{
from{ transform: translateY(0) }
to{ transform: translateY(8px) }
}
.hero-road{
stroke-dashoffset: 0;
animation: heroRoad 8s linear infinite;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
@keyframes heroRoad{
to{ stroke-dashoffset: -400; }
}
/* ===== LAYOUT DO HERO (sem box) ===== */
.hero-inner{ position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:0 1rem; }
.hero-title, .hero-sub, .hero-buttons{ text-align:left; }
.hero-card{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
/* degradê suave só pra leitura, sem parecer “cartão” */
.hero-dinamico::after{
content:""; position:absolute; inset:0; z-index:1;
background: radial-gradient(130% 90% at 15% 30%, rgba(255,255,255,.70) 0, rgba(255,255,255,.28) 36%, rgba(255,255,255,0) 62%);
pointer-events:none;
}
/* ===== MARCADOR VERDE COM BRILHO DINÂMICO ===== */
@keyframes markerSweep{
0% { background-position: 0% 0; }
50%{ background-position: 100% 0; }
100%{ background-position: 0% 0; }
}
/* ===== BOTÕES ===== */
.hero-buttons{ display:flex; gap:16px; margin-top:10px }
.hero-buttons .btn{ border-radius:12px; padding:12px 18px; font-weight:800 }
.hero-buttons .btn--primary{ background:#111; color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.18) }
.hero-buttons .btn--outline{ background:#fff; color:#111; border:2px solid #111 }
.hero-buttons .btn--outline:hover{ border-color:#b9f419; box-shadow:0 8px 26px rgba(185,244,25,.35) }
/* responsivo */
@media (max-width:820px){
.hero-dinamico::after{
background: radial-gradient(120% 80% at 16% 26%, rgba(255,255,255,.78) 0, rgba(255,255,255,.34) 40%, rgba(255,255,255,0) 64%);
}
}
/* margem pequena à esquerda do bloco de texto do hero */
.hero-card{
margin-left: clamp(8px, 1.5vw, 18px);
}
/* descrição: alinhada à esquerda e sem quebra no meio das palavras */
.hero-sub{
text-align: left;
hyphens: none; /* evita hifenização */
word-break: keep-all; /* não quebra dentro da palavra */
overflow-wrap: normal; /* quebra só em espaços */
white-space: normal;
}
/* animação do typing por letra (sem quebrar palavras) */
[data-typer] .typer-char{
opacity: 0;
transform: translateY(.4em);
display: inline-block;
}
[data-typer].typer-ready .typer-char{
animation: typeIn .6s ease forwards;
}
@keyframes typeIn{
to{ opacity:1; transform: translateY(0); }
}
/* 1) remove o degradê/brilho branco do banner */
.hero-dinamico::before{ display:none !important; }
/* 2) card bem transparente, colado à esquerda e pronto p/ receber o canvas */
.hero-card{
position: relative;
margin-left: clamp(8px, 1.5vw, 18px);
background: rgba(255,255,255,.08); /* bem leve */
border: 0;
box-shadow: none;
backdrop-filter: none; /* sem vidro */
-webkit-backdrop-filter: none;
padding: clamp(16px,3vw,28px) clamp(18px,3.4vw,34px);
max-width: min(780px, 70vw);
}
/* o conteúdo fica acima do canvas */
.hero-card > *{ position: relative; z-index: 1; }
/* canvas das bolhas por cima do box (mas atrás do texto) */
#heroDots{
position:absolute; inset:0;
z-index:0;
pointer-events:none;
opacity:.25; /* bem transparente */
}
/* descrição alinhada à esquerda, sem quebrar no meio da palavra */
.hero-sub{
text-align:left;
hyphens:none;
word-break:keep-all;
overflow-wrap:normal;
}
/* elimina qualquer “animação de linhas”/shimmer antigo */
.hero-dinamico.is-loading .hero-title::after,
.hero-dinamico.is-loading .hero-sub::after{ display:none !important; }
.hero-dinamico {
position: relative;
width: 100%;
overflow: hidden;
}
.hero-bg-img {
width: 100%;
height: auto;
display: block;
object-fit: cover; /* garante que a imagem preencha */
}
.hero-dinamico {
position: relative;
width: 100vw;
height: 100vh; /* ocupa 100% da altura da tela */
overflow: hidden;
}
.hero-bg-img {
width: 100%;
height: 100%;
object-fit: cover; /* garante que a imagem preencha sem distorcer */
display: block;
}
.hero-dinamico{
position: relative;
width: 100vw;
height: 100vh; /* ocupa a tela inteira */
overflow: hidden;
}
/* camada de preenchimento (blur) para as “bordas” quando a imagem não cobre */
.hero-dinamico::before{
content:"";
position:absolute; inset:0;
background: var(--hero-bg) center / cover no-repeat;
filter: blur(20px);
transform: scale(1.08); /* evita ver bordas do blur */
z-index: 0;
}
/* IMAGEM: mostrar 100% sem corte */
.hero-bg-img{
position: absolute; inset: 0;
width: 100%;
height: 100%;
object-fit: contain; /* <<< não corta e não estoura */
z-index: 1; /* acima do blur, abaixo do conteúdo */
display: block;
}
/* Canvas das bolhas cobrindo tudo */
.hero-dots{
position:absolute; inset:0;
width:100%; height:100%;
pointer-events:none;
z-index: 2;
}
/* Conteúdo acima de tudo */
.hero-inner{ position:relative; z-index: 3; height:100%; display:grid; align-items:center; }
.hero-title {
font: 900 clamp(28px,5vw,52px)/1.1 Montserrat, sans-serif;
color: #fff; /* texto branco */
margin: 0 0 16px;
text-shadow: none; /* remove sombra branca */
}
.hero-sub {
color: #fff; /* texto branco */
font: 400 18px/1.5 "Montserrat", sans-serif;
margin: 0 0 24px;
white-space: normal; /* mantém fluxo normal */
word-break: normal; /* não corta palavras */
overflow-wrap: anywhere; /* quebra linha normal */
}
.hero-title {
font: 900 clamp(28px,5vw,52px)/1.1 Montserrat, sans-serif;
color: #fff; /* texto branco */
margin: 0 0 16px;
text-shadow: none; /* sem sombra */
}
.hero-sub {
color: #fff;
font: 400 18px/1.5 "Montserrat", sans-serif;
margin: 0 0 24px;
white-space: normal;
word-break: normal;
}
.hero-dinamico::before,
.hero-dinamico::after,
.hero-bg-img::before,
.hero-bg-img::after {
content: none !important;
background: none !important;
box-shadow: none !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* cobre sem distorcer */
display: block;
filter: none !important; /* remove blur/brightness */
box-shadow: none !important;
}
.hero-dinamico::before {
background: linear-gradient(..., rgba(255,255,255,0.6), ...);
}
/* Garanta essa ordem de camadas */
.hero-bg-img{ z-index:0; }
.hero-dots { z-index:1; } /* bolhas */
.hero-diamond{ z-index:2; } /* losango acima das bolhas */
.hero-inner { z-index:3; } /* textos/botões */
.hero-diamond{
--dia-w: clamp(520px, 46vw, 880px);
--dia-h: clamp(280px, 36vh, 520px);
position:absolute;
left: clamp(16px, 4vw, 72px); /* encosta mais à esquerda conforme tela */
top: 54%; /* posição vertical como no seu print */
width: var(--dia-w);
height: var(--dia-h);
transform: translateY(-50%); /* centraliza verticalmente */
pointer-events: none;
/* LOSANGO com clip-path (não distorce a imagem) */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
background: rgba(255,255,255,0.18); /* branco translúcido */
outline: 1px solid rgba(255,255,255,0.28); /* leve contorno */
box-shadow:
0 10px 40px rgba(0,0,0,0.10); /* profundidade sutil */
backdrop-filter: saturate(110%) blur(1px); /* opcional, suaviza o fundo */
}
/* Ajustes em telas muito pequenas */
@media (max-width: 640px){
.hero-diamond{
--dia-w: 88vw;
--dia-h: 34vh;
left: 6vw;
top: 52%;
}
}
.hero-diamond {
--dia-w: clamp(520px, 46vw, 880px);
--dia-h: clamp(280px, 36vh, 520px);
position: absolute;
left: clamp(0px, 2vw, 40px); /* encosta na esquerda */
top: 54%;
width: var(--dia-w);
height: var(--dia-h);
transform: translateY(-50%);
pointer-events: none;
/* forma arredondada estilo losango */
clip-path: polygon(
20% 0, /* topo levemente à direita */
100% 20%,
80% 100%,
0 80%
);
border-radius: 120px; /* arredonda cantos fortes */
background: rgba(255, 255, 255, 0.18);
outline: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
backdrop-filter: saturate(110%) blur(2px);
}
@media (max-width: 640px) {
.hero-diamond {
--dia-w: 88vw;
--dia-h: 34vh;
left: 0;
top: 52%;
border-radius: 80px;
}
}
/* ordem de camadas */
.hero-bg-img{ z-index:0; }
.hero-dots { z-index:1; }
.hero-diamond{ z-index:2; } /* abaixo do texto */
.hero-inner { z-index:3; }
/* SVG do losango */
.hero-diamond{
position: absolute;
top: 52%;
left: -8vw; /* “perde” o início à esquerda */
width: clamp(640px, 58vw, 1080px);
height: clamp(260px, 34vh, 420px);
transform: translateY(-50%); /* centra verticalmente */
pointer-events: none;
filter: drop-shadow(0 10px 24px rgba(0,0,0,.12)); /* leve profundidade */
}
/* preenchimento translúcido e contorno suave */
.hero-diamond rect{
fill: rgba(255,255,255,.18); /* branco transparente */
stroke: rgba(255,255,255,.26); /* contorno sutil */
stroke-width: 1.5;
}
/* telas menores: ajusta posição/tamanho */
@media (max-width: 680px){
.hero-diamond{
left: -14vw;
width: 92vw;
height: 32vh;
}
.hero-diamond rect{
rx: 14; ry: 14;
}
}
/* ordem de camadas */
.hero-bg-img { z-index: 0; }
.hero-dots { z-index: 1; } /* bolhas */
.hero-lozenge{ z-index: 2; } /* lozango translúcido */
.hero-inner { z-index: 3; } /* textos/botões */
/* LOZANGO ARREDONDADO (retângulo com bordas grandes + rotação) */
.hero-lozenge{
--w: clamp(640px, 58vw, 1100px);
--h: clamp(240px, 32vh, 420px);
--bg: rgba(255,255,255,.15); /* transparência elegante */
--bd: rgba(255,255,255,.22); /* contorno sutil (pode remover) */
position: absolute;
top: 52%;
left: -8vw; /* “perde” o início à esquerda */
width: var(--w);
height: var(--h);
transform: translateY(-50%) rotate(8deg); /* leve ângulo moderno */
transform-origin: left center;
border-radius: 56px; /* cantos BEM arredondados */
background: var(--bg);
outline: 1px solid var(--bd);
filter: drop-shadow(0 10px 24px rgba(0,0,0,.12));
pointer-events: none;
}
/* telas menores: reduz e aproxima */
@media (max-width: 768px){
.hero-lozenge{
left: -12vw;
--w: 92vw;
--h: 30vh;
border-radius: 40px;
transform: translateY(-50%) rotate(6deg);
}
}
/* camadas */
.hero-bg-img { z-index:0; }
.hero-dots { z-index:1; }
.hero-lozenge{ z-index:2; } /* fundo do texto */
.hero-inner { z-index:3; }
/* overlay arredondado, sem borda dura */
.hero-lozenge{
position:absolute;
pointer-events:none;
border-radius: 28px; /* cantos BEM arredondados */
background: rgba(255,255,255,.12); /* branco translúcido */
backdrop-filter: blur(6px) saturate(1.05);
-webkit-backdrop-filter: blur(6px) saturate(1.05);
box-shadow: 0 10px 36px rgba(0,0,0,.12);
/* Fade suave para a direita (e leve embaixo) */
-webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1) 65%, rgba(0,0,0,.85) 80%, rgba(0,0,0,0) 100% );
mask-image: linear-gradient( to right, rgba(0,0,0,1) 65%, rgba(0,0,0,.85) 80%, rgba(0,0,0,0) 100% );
}
/* opcional: em telas muito pequenas, menos blur e menos fade */
@media (max-width: 768px){
.hero-lozenge{
border-radius: 22px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
-webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100% );
mask-image: linear-gradient( to right, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100% );
}
}
/* Camadas permanecem iguais */
.hero-bg-img { z-index:0; }
.hero-dots { z-index:1; }
.hero-lozenge{ z-index:2; }
.hero-inner { z-index:3; }
/* Versão refinada do overlay */
.hero-lozenge{
/* Tamanho e posição vêm do JS (place()), mantemos aqui só o estilo */
position:absolute;
pointer-events:none;
/* cantos e leve ângulo via JS; aqui o acabamento */
border-radius: 30px;
/* Camada base translúcida (neutra) */
background:
/* 1) Vinheta leve para dar profundidade */
radial-gradient(120% 140% at 12% 40%, rgba(0,0,0,.16) 0%, rgba(0,0,0,.10) 35%, rgba(0,0,0,.06) 60%, rgba(0,0,0,0) 100%),
/* 2) Fade para a direita para “morrer” na imagem */
linear-gradient(90deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,.06) 60%, rgba(0,0,0,0) 100%),
/* 3) Base de vidro clara */
rgba(255,255,255,.14);
/* Glass sutil (menos borrado para não “lavar” a foto) */
backdrop-filter: blur(4px) saturate(1.05);
-webkit-backdrop-filter: blur(4px) saturate(1.05);
/* Borda e highlight internos discretos */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22), /* highlight de vidro */
inset 0 -1px 0 rgba(0,0,0,.10), /* linha de base */
0 10px 28px rgba(0,0,0,.12); /* sombra externa suave */
/* Cantos ainda mais orgânicos: “squircle” via máscara */
-webkit-mask-image: radial-gradient(110% 140% at 10% 40%, #000 60%, rgba(0,0,0,.9) 78%, rgba(0,0,0,.75) 86%, rgba(0,0,0,.0) 100%);
mask-image: radial-gradient(110% 140% at 10% 40%, #000 60%, rgba(0,0,0,.9) 78%, rgba(0,0,0,.75) 86%, rgba(0,0,0,.0) 100%);
}
@media (max-width: 900px){
.hero-lozenge{
border-radius: 24px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
}
.hero-lozenge {
position: absolute;
pointer-events: none;
z-index: 2;
margin-left: -200px;
/* base glass */
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(2px) saturate(1.05);
-webkit-backdrop-filter: blur(6px) saturate(1.05);
/* sombra para destacar */
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
/* forma de losango/paralelogramo */
clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
border-radius: 24px; /* deixa os cantos suavizados */
/* transição suave ao reposicionar */
transition: all 0.3s ease;
}
/* camadas */
.hero-bg-img { z-index: 0; }
.hero-dots { z-index: 1; }
.hero-lozenge{ z-index: 2; } /* fundo de vidro */
.hero-inner { z-index: 3; }
/* container do shape (posicionado via JS) */
.hero-lozenge{
position: absolute;
pointer-events: none;
/* o tamanho/posição vêm do JS; aqui só estilo */
}
/* o shape em si */
.hero-lozenge::before{
content:"";
position: absolute;
inset: 0;
/* retângulo arredondado */
border-radius: 28px;
/* efeito glass sutil */
background:
linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,0) 100%),
rgba(255,255,255,.14);
backdrop-filter: blur(5px) saturate(1.05);
-webkit-backdrop-filter: blur(5px) saturate(1.05);
box-shadow: 0 12px 32px rgba(0,0,0,.16);
/* transforma em paralelogramo (meio-losango) */
transform: skewX(-30deg);
transform-origin: left center;
}
/* ajuste fino em telas menores */
@media (max-width: 900px){
.hero-lozenge::before{ border-radius: 24px; transform: skewX(-10deg); }
}
/* ===== Tokens ===== */
.hero-atv{
--brand:#b9f419; /* cor principal */
--ink:#0f1419; /* texto */
--muted:#5b6876; /* texto secundário */
--radius:20px;
position:relative; isolation:isolate; overflow:hidden;
display:block; background:#fff;
/* REMOVIDO min-height para não forçar corte vertical */
}
/* ===== Imagem real (sem corte) ===== */
.hero-atv__photo{
display:block; width:100%; height:auto; /* mantém proporção natural, sem cortar */
transform: translate3d(0,0,0) scale(1); /* base para parallax */
will-change: transform;
filter: saturate(1.05) contrast(1.03);
}
/* ===== Overlays ===== */
.hero-atv__glow{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
radial-gradient(60% 50% at 8% 18%, color-mix(in srgb, var(--brand) 32%, #ffffff) 0%, transparent 60%),
radial-gradient(46% 36% at 80% 24%, rgba(255,255,255,.45) 0%, transparent 70%);
animation: glowShift 10s ease-in-out infinite alternate;
mix-blend-mode: screen;
}
@keyframes glowShift{
from{ transform: translateY(0); opacity:.9; }
to{ transform: translateY(-12px); opacity:1; }
}
.hero-atv__wave{
position:absolute; left:0; right:0; bottom:-1px; height:120px; z-index:2;
mix-blend-mode:screen;
}
/* ===== Conteúdo ===== */
.hero-atv__inner{
position:absolute; z-index:3; inset:0;
display:flex; flex-direction:column; justify-content:center;
padding-left:clamp(20px,8vw,120px); padding-right:clamp(12px,5vw,40px);
color:var(--ink);
pointer-events:none; /* evita interferir no hover do parallax; reativa nos botões */
}
.hero-atv__inner .btn{ pointer-events:auto; }
.hero-atv__title{
margin:0 0 10px 0; font-size:clamp(36px,5.2vw,64px);
font-weight:900; letter-spacing:-.02em; line-height:1.05;
background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 24%, #fff) 0%, transparent 60%);
background-size: 280% 100%; background-repeat:no-repeat;
padding-inline:.18em; border-radius:10px; display:inline-block;
animation: titleSweep 3.2s cubic-bezier(.2,.7,.2,1) 1 both;
}
@keyframes titleSweep{ from{ background-position:100% 0 } to{ background-position:0% 0 } }
.hero-atv__sub{
font-size:clamp(16px,1.35vw,20px); line-height:1.6; color:#fff;
margin:8px 0 22px 0; max-width:min(760px, 94vw);
}
/* losango/diagonal sutil */
.hero-atv__lozenge{
position:absolute; left:clamp(-120px, -8vw, -40px); top: clamp(30px, 12vh, 120px);
width:min(56vmin, 560px); aspect-ratio:1/1; transform:rotate(45deg);
border-radius:24px;
background:
conic-gradient(from 190deg at 50% 50%, rgba(185,244,25,.18), rgba(185,244,25,.06) 35%, rgba(185,244,25,.22) 70%, rgba(185,244,25,.08));
filter: drop-shadow(0 24px 48px rgba(0,0,0,.12));
animation: lozPulse 6.5s ease-in-out infinite;
}
@keyframes lozPulse{ 0%{transform:rotate(45deg) scale(1)} 50%{transform:rotate(46deg) scale(1.05)} 100%{transform:rotate(45deg) scale(1)} }
/* CTA */
.hero-atv__cta{ display:flex; gap:10px; align-items:center; }
.btn{
display:inline-flex; align-items:center; gap:10px; font-weight:800;
padding:12px 22px; border-radius:999px; text-decoration:none;
transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.btn--brand{
background: var(--brand); color:#0b0f05;
box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 35%, #0000);
border:1px solid color-mix(in srgb, var(--brand) 36%, #0000);
}
.btn--brand:hover{ transform:translateY(-2px); box-shadow:0 18px 34px color-mix(in srgb, var(--brand) 45%, #0000); }
.btn--ghost{
background: rgba(255,255,255,.8); color:var(--ink);
border:1px solid rgba(15,20,25,.12);
}
.btn--ghost:hover{ background:#fff; transform:translateY(-2px); }
.btn .arrow{ width:22px; height:22px; animation: arrowMove 1.2s ease-in-out infinite; }
@keyframes arrowMove{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(7px)} }
/* Reveal ao entrar (fade-up) */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.delay-1.in{ transition-delay:.07s; }
.delay-2.in{ transition-delay:.14s; }
.delay-3.in{ transition-delay:.21s; }
/* Acessibilidade: menos movimento */
@media (prefers-reduced-motion: reduce){
.hero-atv__photo, .hero-atv__glow, .hero-atv__lozenge, .btn .arrow, .reveal{
animation:none !important; transition:none !important; transform:none !important;
}
}
/* Responsivo: conteúdo respira bem sobre a imagem */
@media (max-width: 760px){
.hero-atv__inner{ padding-left: clamp(16px,5vw,28px); padding-right: clamp(12px,5vw,28px); }
}
/* ===== Page Loader (overlay) ===== */
#pageLoader{
position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
background:
radial-gradient(1200px 600px at 10% 0%, rgba(185,244,25,.08), transparent 60%),
linear-gradient(180deg, #fff 0%, #f7fafc 100%);
transition: opacity .5s ease, visibility .5s ease;
}
#pageLoader.hidden{ opacity:0; visibility:hidden; }
.pl-wrap{ width:min(520px, 82vw); }
.pl-bar{
height:10px; border-radius:999px; background:rgba(15,20,25,.08); overflow:hidden;
box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.pl-fill{
height:100%; width:0%;
background: linear-gradient(90deg, var(--brand, #b9f419), #d5ff4d);
transition: width .25s ease;
}
.pl-meta{
display:flex; justify-content:space-between; align-items:center;
margin:10px 2px 0 2px; color:#5b6876; font:600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.pl-brand{
color:#0f1419; font:900 18px/1.1 Montserrat, system-ui; letter-spacing:.2px;
}
/* ===== Scroll progress (top tracker) ===== */
.scrolltrack{ position:fixed; left:0; right:0; top:0; height:3px; z-index:9990; background:transparent; }
.scrollbar{
height:100%; width:0%;
background: linear-gradient(90deg, var(--brand, #b9f419), #9ee80f);
box-shadow: 0 0 10px rgba(185,244,25,.6);
transition: width .06s linear;
}
/* ===== Reveal genérico ===== */
.reveal, [data-reveal]{ opacity:0; transform: translateY(14px); }
.in-view{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
/* ===== Hover lift para cards ===== */
.card-home{
transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
will-change: transform;
}
.card-home:hover{
transform: translateY(-6px);
box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
/* ===== Ripple nos botões ===== */
.btn{ position:relative; overflow:hidden; }
.btn .ripple{
position:absolute; border-radius:50%; pointer-events:none; transform: scale(0);
width:10px; height:10px; background: rgba(255,255,255,.45);
animation: ripple .6s ease-out forwards;
}
@keyframes ripple{
to{ transform: scale(28); opacity:0; }
}
/* ===== Blur-in nas imagens ===== */
img.fx-blur{ filter: blur(10px) saturate(1.05); transform: translateZ(0);
transition: filter .6s ease, opacity .4s ease;
opacity:.85;
}
img.fx-ready{ filter: blur(0); opacity:1; }
/* ===== Prefere menos movimento ===== */
@media (prefers-reduced-motion: reduce){
.in-view, .card-home, .btn .ripple, .scrollbar{ transition:none !important; animation:none !important; }
}
/* ====== PV • Loading skeleton / shimmer ====== */
.pv-wrap{ position: relative; isolation: isolate; }
.pv-wrap.is-loading .pv-title,
.pv-wrap.is-loading .pv-lead,
.pv-wrap.is-loading .pv-bullets li,
.pv-wrap.is-loading .pv-ctas .btn{
color: transparent !important;
}
/* barras “falsas” sobre cada elemento (sem mudar seu HTML) */
.pv-wrap.is-loading .pv-title::after,
.pv-wrap.is-loading .pv-lead::after,
.pv-wrap.is-loading .pv-bullets li::after,
.pv-wrap.is-loading .pv-ctas .btn::after{
content:"";
display:block;
border-radius:10px;
background:
linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.14), rgba(0,0,0,0.06));
background-size: 200% 100%;
animation: pvShimmer 1.2s linear infinite;
}
/* tamanhos aproximados das barras */
.pv-wrap.is-loading .pv-title::after { height: 38px; max-width: 520px; }
.pv-wrap.is-loading .pv-lead::after { height: 16px; max-width: 640px; margin-top: 10px; }
.pv-wrap.is-loading .pv-bullets li { position:relative; min-height: 16px; }
.pv-wrap.is-loading .pv-bullets li::after{ position:absolute; inset:0 30% auto 0; height:16px; }
.pv-wrap.is-loading .pv-ctas .btn{ position:relative; }
.pv-wrap.is-loading .pv-ctas .btn::after{ position:absolute; inset:0; height:100%; border-radius:999px; }
/* diamond: já existe skeleton no HTML (.diamond2-skel) — ativamos aqui */
.diamond2-home{ position: relative; }
.diamond2-skel{
position:absolute; inset:0; border-radius: 24px;
background:
linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.14), rgba(0,0,0,0.06));
background-size:200% 100%;
animation: pvShimmer 1.1s linear infinite;
opacity: 0; pointer-events: none;
}
.pv-wrap.is-loading .diamond2-skel{ opacity: 1; }
.pv-wrap.is-loading .diamond2-img{ opacity: 0; }
.pv-wrap.ready .diamond2-skel{ opacity: 0; transition: opacity .35s ease; }
.pv-wrap.ready .diamond2-img{ opacity: 1; transition: opacity .45s ease; }
/* shimmer keyframes */
@keyframes pvShimmer{
0%{ background-position: 200% 0; }
100%{ background-position: -200% 0; }
}
/* reveal suave dos itens quando sair do loading */
.pv-reveal{ opacity: 0; transform: translateY(14px); }
.pv-reveal.in{ opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.pv-delay-1.in{ transition-delay: .06s; }
.pv-delay-2.in{ transition-delay: .12s; }
.pv-delay-3.in{ transition-delay: .18s; }
/* ===== Skeleton / shimmer apenas no bloco Resultados ===== */
.pv-wrap{ position:relative; isolation:isolate; }
.pv-wrap.is-loading .pv-title,
.pv-wrap.is-loading .pv-lead,
.pv-wrap.is-loading .pv-bullets li,
.pv-wrap.is-loading .pv-ctas{
color:transparent;
position:relative;
}
/* barrinhas de shimmer */
.pv-wrap.is-loading .pv-title::after,
.pv-wrap.is-loading .pv-lead::after,
.pv-wrap.is-loading .pv-bullets li::after,
.pv-wrap.is-loading .pv-ctas::after{
content:"";
display:block;
border-radius:6px;
height:1em;
background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.15),rgba(0,0,0,.06));
background-size:200% 100%;
animation:pvShimmer 1.2s linear infinite;
}
.pv-wrap.is-loading .pv-title::after{ height:2.4em; margin-bottom:12px; }
.pv-wrap.is-loading .pv-lead::after{ height:1.2em; margin:6px 0; }
.pv-wrap.is-loading .pv-bullets li::after{ height:1em; margin:4px 0; }
.pv-wrap.is-loading .pv-ctas::after{ height:42px; border-radius:999px; margin-top:16px; }
/* diamond skeleton */
.pv-wrap.is-loading .diamond2-img{ opacity:0; }
.pv-wrap.is-loading .diamond2-skel{
opacity:1;
background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.15),rgba(0,0,0,.06));
background-size:200% 100%;
animation:pvShimmer 1.1s linear infinite;
}
.diamond2-skel{ opacity:0; }
/* shimmer keyframes */
@keyframes pvShimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
/* reveal após loading */
.pv-reveal{ opacity:0; transform:translateY(18px); }
.pv-reveal.in{ opacity:1; transform:none; transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1); }
.pv-delay-1.in{ transition-delay:.08s; }
.pv-delay-2.in{ transition-delay:.16s; }
.pv-delay-3.in{ transition-delay:.24s; }
.area_cliente_mobile{
display: none;
}