@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');
/* =========================================================
PLANTARIS — HOME.CSS
=========================================================
SISTEMA:
- Cada .pagina ocupa 100vh
- scroll-snap por página
- conteúdo excedente rola dentro da página
- header fixo
- layout responsivo
========================================================= */
/* =========================================================
VARIÁVEIS
========================================================= */
:root {
--verde: #0e9c7e;
--verde-escuro: #0a6f58;
--verde-profundo: #063d31;
--verde-claro: #3fc4a3;
--areia: #e7d8b8;
--areia-clara: #f5eeda;
--areia-borda: #d9b98c;
--branco: #ffffff;
--preto: #17211d;
--texto: #24312b;
--texto-claro: #58685f;
--texto-suave: #738078;
--raio: 16px;
--raio-grande: 24px;
--sombra:
0 20px 44px rgba(10, 111, 88, .14);
--sombra-suave:
0 10px 30px rgba(10, 111, 88, .08);
--header-height: 80px;
--pagina-padding-x: 24px;
--pagina-padding-y: 48px;
}
/* =========================================================
RESET
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
/*
O scroll acontece no documento.
Cada página recebe scroll-snap.
*/
scroll-snap-type: y mandatory;
overflow-x: hidden;
overflow-y: auto;
}
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-family:
'Inter',
'Segoe UI',
Arial,
sans-serif;
color: var(--texto);
background: var(--branco);
line-height: 1.6;
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
color: var(--verde);
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
button,
input,
textarea,
select {
font: inherit;
}
h1,
h2,
h3,
h4 {
margin: 0 0 .5em;
font-family:
'Fraunces',
Georgia,
serif;
color: var(--verde-escuro);
line-height: 1.15;
text-wrap: balance;
}
p {
margin: 0 0 1em;
}
/* =========================================================
ACESSIBILIDADE
========================================================= */
.skip-link {
position: fixed;
top: 10px;
left: -9999px;
z-index: 99999;
padding: 10px 16px;
border-radius: 8px;
background: var(--verde-escuro);
color: #fff;
text-decoration: none;
box-shadow: var(--sombra);
}
.skip-link:focus {
left: 10px;
}
/* =========================================================
CONTAINER
========================================================= */
.wrap {
width: 100%;
max-width: 1160px;
margin-left: auto;
margin-right: auto;
padding-left: var(--pagina-padding-x);
padding-right: var(--pagina-padding-x);
}
/* =========================================================
SISTEMA DE PÁGINAS
=========================================================
Use no HTML:
ou:
...
A página ocupa exatamente uma viewport.
========================================================= */
.pagina,
section.h-100,
div.h-100 {
position: relative;
width: 100%;
min-height: 100vh;
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
/*
Evita que o conteúdo de uma página
"vaze" para a próxima.
*/
overflow-x: hidden;
overflow-y: auto;
/*
O header é fixo.
Reservamos espaço para ele.
*/
scroll-margin-top: var(--header-height);
}
/*
Seções principais do site.
Não coloque footer dentro de .pagina
se quiser que o footer tenha altura própria.
*/
.hero-full,
.servico-full,
.contato-full,
.stats,
.regioes,
.parcerias,
.artigos,
.depoimentos {
scroll-snap-align: start;
scroll-snap-stop: always;
}
/*
Todas as páginas principais usam
o mesmo sistema de altura.
*/
.hero-full,
.servico-full,
.contato-full,
.stats,
.regioes,
.parcerias,
.artigos,
.depoimentos {
min-height: 100vh;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
/* =========================================================
HEADER
========================================================= */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
z-index: 1000;
background:
linear-gradient(
120deg,
var(--verde-escuro),
#0d5d49 70%,
#08493a
);
border-bottom:
1px solid
rgba(255, 255, 255, .08);
box-shadow:
0 2px 18px
rgba(0, 0, 0, .12);
}
.header-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* =========================================================
MARCA
========================================================= */
.brand {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
text-decoration: none;
}
.brand img {
width: auto;
height: 48px;
}
.brand-mark {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(255, 255, 255, .12);
color: var(--areia);
font-size: 20px;
}
.brand-name {
font-family:
'Fraunces',
Georgia,
serif;
font-size: 22px;
font-weight: 600;
color: #fff;
}
/* =========================================================
MENU
========================================================= */
.main-nav {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.main-nav a {
position: relative;
color:
rgba(255, 255, 255, .82);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
transition:
color .2s ease,
opacity .2s ease;
}
.main-nav a::after {
content: "";
position: absolute;
left: 50%;
bottom: -7px;
width: 0;
height: 2px;
transform: translateX(-50%);
border-radius: 99px;
background: var(--areia);
transition: width .2s ease;
}
.main-nav a:hover {
color: #fff;
}
.main-nav a:hover::after {
width: 70%;
}
/* =========================================================
BOTÃO ENTRAR
========================================================= */
.btn-entrar {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-shrink: 0;
padding: 10px 22px;
border-radius: 999px;
background: var(--areia);
color: var(--verde-escuro);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition:
transform .2s ease,
background .2s ease,
box-shadow .2s ease;
}
.btn-entrar:hover {
background: #fff;
color: var(--verde-escuro);
transform: translateY(-2px);
box-shadow:
0 8px 20px
rgba(0, 0, 0, .15);
}
/* =========================================================
HERO
========================================================= */
.hero {
background:
radial-gradient(
circle at 85% 10%,
rgba(14, 156, 126, .14),
transparent 55%
),
linear-gradient(
135deg,
var(--areia-clara),
#fffdf7
);
border-bottom:
1px solid
var(--areia-borda);
}
.hero-full {
display: flex;
align-items: center;
justify-content: center;
padding-top:
calc(var(--header-height) + 40px);
padding-bottom: 40px;
}
.hero-inner {
width: 100%;
max-width: 1160px;
display: grid;
grid-template-columns:
minmax(0, 1.15fr)
minmax(300px, .85fr);
align-items: center;
gap: 70px;
}
/* =========================================================
HERO — TEXTO
========================================================= */
.hero-content {
min-width: 0;
}
.eyebrow {
margin-bottom: 18px;
color: var(--verde-escuro);
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.hero h1 {
margin-bottom: 24px;
font-size:
clamp(42px, 6vw, 72px);
font-weight: 600;
line-height: 1.04;
}
.hero-lead {
max-width: 62ch;
margin-bottom: 0;
color: var(--texto-claro);
font-size: 18px;
line-height: 1.7;
}
/* =========================================================
HERO — BOTÕES
========================================================= */
.hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 26px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease,
color .2s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.btn-primary {
background: var(--verde-escuro);
color: #fff;
box-shadow: var(--sombra);
}
.btn-primary:hover {
background: var(--verde);
color: #fff;
box-shadow:
0 18px 35px
rgba(10, 111, 88, .25);
}
.btn-outline {
background: transparent;
border:
1.5px solid
var(--verde-escuro);
color: var(--verde-escuro);
}
.btn-outline:hover {
background: var(--verde-escuro);
color: #fff;
}
.btn-block {
display: flex;
width: 100%;
justify-content: center;
}
/* =========================================================
HERO — PILARES
========================================================= */
.hero-pillars {
width: 100%;
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 16px;
}
.hero-pillars a {
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
padding: 22px;
border:
1px solid
var(--areia-borda);
border-radius: var(--raio);
background: rgba(255, 255, 255, .88);
color: var(--verde-escuro);
font-size: 15px;
font-weight: 600;
text-align: center;
text-decoration: none;
box-shadow:
0 10px 30px
rgba(10, 111, 88, .07);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.hero-pillars a:hover {
transform: translateY(-5px);
border-color: var(--verde);
box-shadow: var(--sombra);
}
.hero-pillars i {
display: block;
color: var(--verde);
font-size: 34px;
}
/* =========================================================
INDICADOR DE SCROLL
========================================================= */
.scroll-hint {
position: absolute;
left: 50%;
bottom: 18px;
transform:
translateX(-50%);
color: var(--verde-escuro);
font-size: 22px;
opacity: .6;
animation:
flutuar
2.2s
ease-in-out
infinite;
}
@keyframes flutuar {
0%,
100% {
transform:
translate(-50%, 0);
}
50% {
transform:
translate(-50%, 8px);
}
}
/* =========================================================
SEÇÕES
========================================================= */
section {
position: relative;
scroll-margin-top: var(--header-height);
}
.servico,
.regioes,
.parcerias,
.artigos,
.depoimentos,
.contato {
position: relative;
}
/* =========================================================
CONTEÚDO INTERNO DAS PÁGINAS
========================================================= */
.servico-full > .wrap,
.regioes > .wrap,
.parcerias > .wrap,
.artigos > .wrap,
.depoimentos > .wrap,
.contato-full > .wrap,
.stats > .wrap {
width: 100%;
}
/*
Quando o conteúdo cabe na tela:
centraliza verticalmente.
Quando não cabe:
o overflow-y da própria página
permite rolagem.
*/
.servico-full,
.regioes,
.parcerias,
.artigos,
.depoimentos,
.contato-full,
.stats {
display: flex;
align-items: center;
}
/* =========================================================
TÍTULOS
========================================================= */
.section-eyebrow {
margin-bottom: 10px;
color: var(--verde);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.section-eyebrow.light {
color: var(--areia);
}
.section-title {
max-width: 22ch;
margin-bottom: 20px;
font-size:
clamp(30px, 4vw, 44px);
font-weight: 600;
line-height: 1.1;
}
.section-title.light {
color: #fff;
}
.section-lead {
max-width: 68ch;
color: var(--texto-claro);
font-size: 17px;
line-height: 1.7;
}
.section-header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 40px;
}
/* =========================================================
SERVIÇOS
========================================================= */
.servico {
background: var(--branco);
}
.servico.alt {
background: var(--areia-clara);
}
.servico-inner {
width: 100%;
display: grid;
grid-template-columns:
minmax(0, 1.15fr)
minmax(300px, .85fr);
align-items: center;
gap: 56px;
}
.servico-inner.reverso {
grid-template-columns:
minmax(300px, .85fr)
minmax(0, 1.15fr);
}
/* =========================================================
ORDEM SERVIÇO REVERSO
========================================================= */
.servico-inner.reverso
.servico-texto {
order: 2;
}
.servico-inner.reverso
.servico-card-lateral,
.servico-inner.reverso
.servico-galeria {
order: 1;
}
/* =========================================================
TEXTO SERVIÇO
========================================================= */
.servico-texto {
min-width: 0;
}
.servico-texto
.section-lead {
margin-bottom: 32px;
}
/* =========================================================
LISTA SERVIÇOS
========================================================= */
.servico-lista {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.servico-item {
padding: 18px 20px;
border:
1px solid
var(--areia-borda);
border-radius: 12px;
background: var(--branco);
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.servico-item:hover {
transform: translateY(-2px);
border-color: var(--verde-claro);
box-shadow:
0 10px 25px
rgba(10, 111, 88, .08);
}
.servico-item.destaque {
border-color: var(--verde);
background:
linear-gradient(
120deg,
rgba(14, 156, 126, .08),
transparent
);
}
.servico-item strong {
display: block;
margin-bottom: 3px;
color: var(--verde-escuro);
font-size: 16px;
}
.servico-item-tag {
display: block;
margin:
2px 0 8px;
color: var(--verde);
font-size: 12.5px;
font-weight: 600;
}
.servico-item p {
margin-bottom: 0;
color: var(--texto-claro);
font-size: 14.5px;
}
/* =========================================================
CHECKLIST
========================================================= */
.check-list {
display: flex;
flex-direction: column;
gap: 12px;
margin:
0 0 32px;
padding: 0;
list-style: none;
}
.check-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
}
.check-list i {
flex-shrink: 0;
color: var(--verde);
}
/* =========================================================
TAGS
========================================================= */
.tags-publico {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
}
.tags-publico span {
padding: 6px 12px;
border:
1px solid
var(--areia-borda);
border-radius: 999px;
background: var(--branco);
color: var(--texto-claro);
font-size: 12.5px;
font-weight: 600;
}
/* =========================================================
GALERIA
========================================================= */
.servico-galeria {
width: 100%;
display: grid;
grid-template-columns:
1fr 1fr;
gap: 14px;
}
.servico-galeria img {
width: 100%;
height: 180px;
object-fit: cover;
border:
1px solid
var(--areia-borda);
border-radius: var(--raio);
box-shadow: var(--sombra);
}
.servico-galeria img:first-child {
grid-column: 1 / -1;
height: 260px;
}
/* =========================================================
CARD LATERAL
========================================================= */
.servico-card-lateral {
width: 100%;
padding: 40px 32px;
border:
1px solid
var(--areia-borda);
border-radius: var(--raio);
background: var(--branco);
box-shadow: var(--sombra);
}
.servico-card-lateral i {
display: block;
margin-bottom: 16px;
color: var(--verde);
font-size: 36px;
}
.servico-card-lateral h3 {
margin-bottom: 12px;
font-size: 22px;
}
.servico-card-lateral p {
margin-bottom: 0;
color: var(--texto-claro);
font-size: 14.5px;
}
.servico-card-lateral
.check-list {
margin-bottom: 0;
}
/* =========================================================
RESULTADOS / ESTATÍSTICAS
========================================================= */
.stats {
position: relative;
color: #fff;
text-align: center;
background:
radial-gradient(
circle at 12% 20%,
rgba(63, 196, 163, .18),
transparent 32%
),
radial-gradient(
circle at 88% 80%,
rgba(231, 216, 184, .12),
transparent 30%
),
linear-gradient(
135deg,
#063d31 0%,
var(--verde-escuro) 48%,
#08493a 100%
);
}
/* =========================================================
TEXTURA RESULTADOS
========================================================= */
.stats::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(255, 255, 255, .025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, .025) 1px,
transparent 1px
);
background-size: 55px 55px;
mask-image:
linear-gradient(
to bottom,
transparent,
black 20%,
black 80%,
transparent
);
pointer-events: none;
}
/* =========================================================
CÍRCULO DECORATIVO
========================================================= */
.stats::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -180px;
top: -180px;
border:
1px solid
rgba(255, 255, 255, .08);
border-radius: 50%;
box-shadow:
0 0 0 60px
rgba(255, 255, 255, .025),
0 0 0 120px
rgba(255, 255, 255, .015);
pointer-events: none;
}
/* =========================================================
CONTEÚDO STATS
========================================================= */
.stats > .wrap {
position: relative;
z-index: 2;
width: 100%;
}
.stats .section-eyebrow {
margin-bottom: 14px;
color: var(--areia);
letter-spacing: .16em;
}
.stats .section-title {
max-width: none;
margin:
0 auto;
color: #fff;
font-size:
clamp(34px, 5vw, 52px);
line-height: 1.1;
}
.stats-subtitle {
max-width: 650px;
margin:
18px auto 0;
color:
rgba(255, 255, 255, .68);
font-size: 16px;
}
/* =========================================================
GRID STATS
========================================================= */
.stats-grid {
width: 100%;
max-width: 1050px;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 22px;
margin:
58px auto 0;
}
/* =========================================================
CARD STAT
========================================================= */
.stat {
position: relative;
min-height: 260px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 38px 28px;
overflow: hidden;
border:
1px solid
rgba(255, 255, 255, .14);
border-radius: 22px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, .12),
rgba(255, 255, 255, .045)
);
box-shadow:
0 24px 60px
rgba(0, 0, 0, .18),
inset
0 1px 0
rgba(255, 255, 255, .08);
backdrop-filter:
blur(10px);
-webkit-backdrop-filter:
blur(10px);
transition:
transform .25s ease,
border-color .25s ease,
background .25s ease,
box-shadow .25s ease;
}
.stat:hover {
transform:
translateY(-8px);
border-color:
rgba(63, 196, 163, .5);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, .16),
rgba(255, 255, 255, .07)
);
box-shadow:
0 30px 70px
rgba(0, 0, 0, .25),
0 0 0 1px
rgba(63, 196, 163, .08);
}
/* =========================================================
LINHA DECORATIVA
========================================================= */
.stat::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 80px;
height: 3px;
transform:
translateX(-50%);
border-radius:
0 0 10px 10px;
background:
linear-gradient(
90deg,
transparent,
var(--verde-claro),
transparent
);
}
/* =========================================================
BRILHO
========================================================= */
.stat::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
top: -100px;
right: -100px;
border-radius: 50%;
background:
rgba(63, 196, 163, .10);
filter: blur(5px);
pointer-events: none;
}
/* =========================================================
NÚMERO
========================================================= */
.stat-number {
position: relative;
z-index: 2;
display: block;
color: var(--areia);
font-family:
'Fraunces',
Georgia,
serif;
font-size:
clamp(58px, 7vw, 88px);
font-weight: 700;
line-height: .95;
letter-spacing: -.045em;
font-variant-numeric:
tabular-nums;
text-shadow:
0 8px 25px
rgba(0, 0, 0, .20);
}
.stat-number::after {
content: "+";
margin-left: 5px;
color: var(--verde-claro);
font-family:
'Inter',
sans-serif;
font-size: 20px;
font-weight: 700;
vertical-align: top;
}
/* =========================================================
LABEL
========================================================= */
.stat-label {
position: relative;
z-index: 2;
display: block;
margin-top: 18px;
color:
rgba(255, 255, 255, .88);
font-size: 14px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
/* =========================================================
OBSERVAÇÃO
========================================================= */
.stats-note {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
max-width: 600px;
margin:
34px auto 0;
padding: 9px 16px;
border:
1px solid
rgba(255, 255, 255, .09);
border-radius: 999px;
background:
rgba(255, 255, 255, .055);
color:
rgba(255, 255, 255, .58);
font-size: 12.5px;
}
.stats-note::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: #55d6a9;
box-shadow:
0 0 0 4px
rgba(85, 214, 169, .12),
0 0 12px
rgba(85, 214, 169, .5);
}
/* =========================================================
DEPOIMENTOS
========================================================= */
.depoimentos {
background: var(--branco);
}
.depoimentos-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 44px;
}
.depoimento-card {
min-height: 240px;
display: flex;
flex-direction: column;
gap: 12px;
padding: 26px;
border:
1px solid
var(--areia-borda);
border-radius: var(--raio);
background:
var(--areia-clara);
}
.depoimento-destaque {
background: var(--branco);
border-color:
var(--verde-claro);
box-shadow: var(--sombra);
}
.depoimento-estrelas {
color: #d99a1f;
font-size: 15px;
letter-spacing: 2px;
}
.depoimento-estrelas
.bi-star {
color: var(--areia-borda);
}
.depoimento-texto {
flex-grow: 1;
margin-bottom: 0;
color: var(--texto);
font-family:
'Fraunces',
Georgia,
serif;
font-size: 16.5px;
line-height: 1.55;
}
.depoimento-autor {
margin-top: auto;
}
.depoimento-nome {
display: block;
color: var(--verde-escuro);
font-size: 14px;
font-weight: 700;
}
.depoimento-empresa {
display: block;
color: var(--texto-claro);
font-size: 12.5px;
}
/* =========================================================
REGIÕES
========================================================= */
.regioes {
background: var(--areia-clara);
}
.regioes-inner {
width: 100%;
display: grid;
grid-template-columns:
minmax(0, .95fr)
minmax(0, 1.05fr);
align-items: center;
gap: 56px;
}
.regioes-sub {
margin-top: 8px;
color: var(--verde-escuro);
font-weight: 600;
}
.regioes-list {
display: flex;
flex-direction: column;
gap: 12px;
margin:
24px 0 0;
padding: 0;
list-style: none;
}
.regioes-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding:
14px 18px;
border:
1px solid
var(--areia-borda);
border-left:
4px solid
var(--verde);
border-radius: 10px;
background: var(--branco);
font-weight: 600;
}
.regioes-list
li span:first-child {
display: flex;
align-items: center;
gap: 10px;
}
.regioes-list i {
color: var(--verde);
}
.regioes-list small {
color: var(--texto-claro);
font-size: 12.5px;
font-weight: 500;
}
/* =========================================================
MAPA
========================================================= */
.mapa-wrap {
padding: 20px;
border:
1px solid
var(--areia-borda);
border-radius: var(--raio);
background: var(--branco);
box-shadow: var(--sombra);
}
.mapa-wrap img {
width: 100%;
height: auto;
}
.mapa-legenda {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 14px;
color: var(--texto-claro);
font-size: 13px;
}
.mapa-legenda span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dot {
width: 11px;
height: 11px;
display: inline-block;
border-radius: 3px;
}
.dot-atendido {
background: var(--verde);
}
.dot-outro {
background: var(--areia-borda);
}
/* =========================================================
PARCERIAS
========================================================= */
.parcerias {
background: var(--branco);
}
.parcerias-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 20px;
margin-top: 44px;
}
.parceria-card {
padding:
28px 18px;
border:
1px solid
var(--areia-borda);
border-radius: var(--raio);
background:
var(--areia-clara);
text-align: center;
transition:
transform .2s ease,
box-shadow .2s ease;
}
.parceria-card:hover {
transform:
translateY(-4px);
box-shadow:
var(--sombra-suave);
}
.parceria-card i {
display: block;
margin-bottom: 10px;
color: var(--verde-escuro);
font-size: 24px;
}
.parceria-card span {
font-size: 14.5px;
font-weight: 600;
}
/* =========================================================
ARTIGOS
========================================================= */
.artigos {
background: var(--areia-clara);
}
.artigos-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 44px;
}
.artigo-card {
min-height: 260px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 26px;
border:
1px solid
var(--areia-borda);
border-radius: var(--raio);
background: var(--branco);
}
.artigo-card
.artigo-num {
color: var(--verde-claro);
font-family:
'Fraunces',
serif;
font-size: 26px;
font-weight: 700;
}
.artigo-card h3 {
margin-bottom: 0;
font-size: 17px;
line-height: 1.3;
}
.artigo-card p {
margin-bottom: 0;
color: var(--texto-claro);
font-size: 14px;
}
.artigo-autor {
color: var(--verde-escuro);
font-size: 12.5px;
font-weight: 600;
}
.artigo-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 4px;
color: var(--verde-escuro);
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
transition:
gap .2s ease,
color .2s ease;
}
.artigo-link:hover {
gap: 9px;
color: var(--verde);
}
/* =========================================================
ARTIGO CTA
========================================================= */
.artigo-card-cta {
align-items: flex-start;
justify-content: center;
border-color: transparent;
background:
linear-gradient(
150deg,
var(--verde-escuro),
#08493a
);
}
.artigo-card-cta i {
color: var(--areia);
font-size: 26px;
}
.artigo-card-cta h3,
.artigo-card-cta p {
color: #fff;
}
.artigo-card-cta p {
color:
rgba(255, 255, 255, .75);
}
.artigo-card-cta
.btn-outline {
margin-top: 6px;
border-color:
rgba(255, 255, 255, .5);
color: #fff;
}
.artigo-card-cta
.btn-outline:hover {
background: #fff;
color: var(--verde-escuro);
}
/* =========================================================
CONTATO
========================================================= */
.contato {
background: var(--branco);
}
.contato-full {
display: flex;
align-items: center;
}
.contato-inner {
width: 100%;
display: grid;
grid-template-columns:
minmax(0, 1.2fr)
minmax(320px, 1fr);
align-items: center;
gap: 48px;
}
.contato-list {
display: flex;
flex-direction: column;
gap: 14px;
margin:
24px 0 0;
padding: 0;
list-style: none;
}
.contato-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
}
.contato-list i {
flex-shrink: 0;
margin-top: 3px;
color: var(--verde);
}
.contato-list a {
color: var(--texto);
font-weight: 600;
text-decoration: none;
}
.contato-list a:hover {
color: var(--verde);
}
.contato-card {
padding: 32px;
border:
1px solid
var(--areia-borda);
border-radius: var(--raio);
background:
var(--areia-clara);
box-shadow:
0 12px 30px
rgba(10, 111, 88, .08);
}
.contato-card h3 {
font-size: 20px;
}
.contato-card p {
color: var(--texto-claro);
font-size: 14.5px;
}
/* =========================================================
TABLET — 1100px
========================================================= */
@media (max-width: 1100px) {
.main-nav {
gap: 15px;
}
.main-nav a {
font-size: 13px;
}
.hero-inner {
gap: 45px;
}
.servico-inner {
gap: 40px;
}
}
/* =========================================================
TABLET — 900px
========================================================= */
@media (max-width: 900px) {
:root {
--header-height: 72px;
}
.main-nav {
display: none;
}
/* HERO */
.hero-inner {
grid-template-columns:
1fr 1fr;
gap: 35px;
}
.hero h1 {
font-size:
clamp(40px, 6vw, 58px);
}
.hero-pillars a {
min-height: 130px;
}
/* SERVIÇOS */
.servico-inner,
.servico-inner.reverso {
grid-template-columns: 1fr;
}
.servico-inner .servico-texto,
.servico-inner.reverso .servico-texto,
.servico-inner .servico-card-lateral,
.servico-inner.reverso .servico-card-lateral,
.servico-inner .servico-galeria,
.servico-inner.reverso .servico-galeria {
order: initial;
}
/* REGIÕES */
.regioes-inner {
grid-template-columns: 1fr;
gap: 35px;
}
/* CONTATO */
.contato-inner {
grid-template-columns: 1fr;
}
/* PARCERIAS */
.parcerias-grid {
grid-template-columns:
repeat(2, 1fr);
}
/* ARTIGOS */
.artigos-grid {
grid-template-columns:
repeat(2, 1fr);
}
/* DEPOIMENTOS */
.depoimentos-grid {
grid-template-columns:
repeat(2, 1fr);
}
/* STATS */
.stats-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 44px;
}
.stat {
min-height: 220px;
padding:
28px 16px;
}
.stat-number {
font-size: 54px;
}
.stat-label {
font-size: 12px;
}
}
/* =========================================================
MOBILE — 700px
========================================================= */
@media (max-width: 700px) {
/*
No mobile não forçamos snap obrigatório.
Isso evita que o navegador "puxe"
a página enquanto o usuário lê conteúdo longo.
*/
html {
scroll-snap-type: y proximity;
}
/*
Páginas continuam começando como uma viewport,
mas podem crescer caso o conteúdo precise.
*/
.pagina,
section.h-100,
div.h-100,
.hero-full,
.servico-full,
.contato-full,
.stats,
.regioes,
.parcerias,
.artigos,
.depoimentos {
min-height: 100vh;
height: auto;
overflow-y: visible;
scroll-snap-align: start;
scroll-snap-stop: normal;
}
/* HERO */
.hero-full {
padding-top:
calc(var(--header-height) + 35px);
padding-bottom: 50px;
align-items: flex-start;
}
.hero-inner {
grid-template-columns: 1fr;
gap: 30px;
}
.hero-pillars {
margin-top: 10px;
}
/* PÁGINAS */
.servico-full,
.contato-full,
.regioes,
.parcerias,
.artigos,
.depoimentos,
.stats {
padding-top:
calc(var(--header-height) + 45px);
padding-bottom: 55px;
align-items: flex-start;
}
/* STATS */
.stats-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin-top: 38px;
}
.stat {
min-height: 190px;
}
.stat-number {
font-size: 62px;
}
/* OUTROS GRIDS */
.parcerias-grid,
.artigos-grid,
.depoimentos-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
MOBILE — 560px
========================================================= */
@media (max-width: 560px) {
:root {
--header-height: 68px;
--pagina-padding-x: 18px;
}
/* HEADER */
.site-header {
height: 68px;
}
.brand img {
height: 38px;
}
.brand-name {
font-size: 19px;
}
.btn-entrar {
padding:
9px 15px;
font-size: 13px;
}
/* HERO */
.hero h1 {
font-size:
clamp(38px, 12vw, 50px);
}
.hero-lead {
font-size: 16px;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
}
.hero-actions .btn {
width: 100%;
}
.hero-pillars {
grid-template-columns:
repeat(2, 1fr);
gap: 10px;
}
.hero-pillars a {
min-height: 110px;
padding:
15px 10px;
font-size: 13px;
}
.hero-pillars i {
font-size: 27px;
}
/* TÍTULOS */
.section-title {
font-size:
clamp(28px, 9vw, 38px);
}
.section-lead {
font-size: 15.5px;
}
/* SERVIÇOS */
.servico-lista {
gap: 12px;
}
.servico-item {
padding: 16px;
}
.servico-galeria {
grid-template-columns: 1fr;
}
.servico-galeria img,
.servico-galeria img:first-child {
height: 200px;
}
.servico-card-lateral {
padding:
28px 22px;
}
/* STATS */
.stats-grid {
gap: 14px;
}
.stat {
min-height: 175px;
padding:
26px 18px;
}
.stat-number {
font-size: 58px;
}
.stat-label {
margin-top: 12px;
font-size: 11px;
}
.stats-note {
width: 100%;
border-radius: 14px;
padding:
10px 14px;
line-height: 1.4;
}
/* MAPA */
.mapa-wrap {
padding: 12px;
}
.mapa-legenda {
flex-direction: column;
gap: 8px;
}
/* CONTATO */
.contato-card {
padding: 24px;
}
/* FOOTER */
.footer-inner {
justify-content: center;
text-align: center;
}
}
/* =========================================================
TELAS MUITO BAIXAS
========================================================= */
@media (max-height: 700px) and (min-width: 701px) {
.hero-full,
.servico-full,
.contato-full,
.stats,
.regioes,
.parcerias,
.artigos,
.depoimentos {
align-items: flex-start;
padding-top:
calc(var(--header-height) + 30px);
padding-bottom: 30px;
}
.stats-grid {
margin-top: 30px;
}
.stat {
min-height: 200px;
}
}
/* =========================================================
REDUÇÃO DE MOVIMENTO
========================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
scroll-snap-type: none;
}
.scroll-hint {
animation: none;
}
.btn,
.servico-item,
.hero-pillars a,
.stat,
.parceria-card {
transition: none;
}
.stat:hover,
.parceria-card:hover,
.servico-item:hover,
.hero-pillars a:hover,
.btn:hover {
transform: none;
}
}
/* =========================================================
FALLBACK PARA NAVEGADORES SEM SCROLL SNAP
========================================================= */
@supports not (scroll-snap-type: y mandatory) {
html {
scroll-behavior: smooth;
}
.pagina,
section.h-100,
div.h-100 {
min-height: 100vh;
}
}
/* =========================================================
RODAPÉ — PLANTARIS
========================================================= */
.site-footer {
position: relative;
background:
radial-gradient(
circle at 12% 15%,
rgba(63, 196, 163, .16),
transparent 32%
),
radial-gradient(
circle at 88% 85%,
rgba(63, 196, 163, .10),
transparent 30%
),
linear-gradient(
135deg,
var(--verde-profundo) 0%,
var(--verde-escuro) 52%,
#08493a 100%
);
color: rgba(255, 255, 255, .78);
padding: 65px 0 0;
overflow: hidden;
border-top:
1px solid
rgba(255, 255, 255, .08);
}
/* =========================================================
LINHA DECORATIVA SUPERIOR
========================================================= */
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background:
linear-gradient(
90deg,
transparent 0%,
var(--verde-claro) 25%,
var(--areia) 50%,
var(--verde-claro) 75%,
transparent 100%
);
}
/* =========================================================
DETALHE DECORATIVO
========================================================= */
.site-footer::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -180px;
bottom: -250px;
border:
1px solid
rgba(255, 255, 255, .06);
border-radius: 50%;
box-shadow:
0 0 0 60px
rgba(255, 255, 255, .025),
0 0 0 120px
rgba(255, 255, 255, .015);
pointer-events: none;
}
/* =========================================================
CONTEÚDO PRINCIPAL
========================================================= */
.footer-main {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
1.6fr
.8fr
.8fr
1.25fr;
gap: 55px;
padding-bottom: 50px;
}
/* =========================================================
MARCA
========================================================= */
.footer-brand {
max-width: 330px;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
color: #fff;
text-decoration: none;
}
.footer-logo img {
display: block;
width: auto;
max-width: 190px;
height: 52px;
object-fit: contain;
}
.footer-logo-mark {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border:
1px solid
rgba(255, 255, 255, .12);
border-radius: 50%;
background:
rgba(255, 255, 255, .10);
color: var(--areia);
font-size: 21px;
}
.footer-logo-name {
font-family:
'Fraunces',
Georgia,
serif;
color: #fff;
font-size: 27px;
font-weight: 600;
}
.footer-brand > p {
max-width: 310px;
margin: 0;
color:
rgba(255, 255, 255, .62);
font-size: 14px;
line-height: 1.7;
}
/* =========================================================
REDES SOCIAIS
========================================================= */
.footer-social {
display: flex;
align-items: center;
gap: 9px;
margin-top: 24px;
}
.footer-social a {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border:
1px solid
rgba(255, 255, 255, .12);
border-radius: 50%;
background:
rgba(255, 255, 255, .07);
color:
rgba(255, 255, 255, .80);
text-decoration: none;
transition:
transform .2s ease,
background .2s ease,
color .2s ease,
border-color .2s ease;
}
.footer-social a:hover {
transform: translateY(-3px);
background: var(--verde);
border-color: var(--verde);
color: #fff;
}
/* =========================================================
COLUNAS
========================================================= */
.footer-column h3 {
margin:
0 0 20px;
color: #fff;
font-family:
'Inter',
sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
}
.footer-column ul {
display: flex;
flex-direction: column;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-column li {
display: flex;
align-items: flex-start;
gap: 9px;
color:
rgba(255, 255, 255, .62);
font-size: 13.5px;
line-height: 1.5;
}
.footer-column a {
color:
rgba(255, 255, 255, .65);
text-decoration: none;
transition:
color .2s ease,
padding-left .2s ease;
}
.footer-column a:hover {
padding-left: 3px;
color: var(--areia);
}
/* =========================================================
CONTATO
========================================================= */
.footer-contact li i {
width: 17px;
flex: 0 0 17px;
margin-top: 2px;
color: var(--verde-claro);
}
.footer-contact a {
color:
rgba(255, 255, 255, .72);
}
.footer-contact a:hover {
color: var(--areia);
}
/* =========================================================
BARRA INFERIOR
========================================================= */
.footer-bottom {
position: relative;
z-index: 2;
min-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top:
1px solid
rgba(255, 255, 255, .10);
color:
rgba(255, 255, 255, .48);
font-size: 12px;
}
.footer-bottom-links {
display: flex;
align-items: center;
}
.footer-bottom a {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--verde-escuro);
text-decoration: none;
font-weight: 700;
transition:
color .2s ease,
gap .2s ease;
}
.footer-bottom a:hover {
gap: 10px;
color: var(--verde-escuro);
}
.footer-bottom a::after {
content: "→";
}
/* =========================================================
RESPONSIVO — 900px
========================================================= */
@media (max-width: 900px) {
.site-footer {
padding-top: 55px;
}
.footer-main {
grid-template-columns:
1.3fr 1fr 1fr;
gap: 40px;
}
.footer-brand {
grid-column: 1 / -1;
max-width: 520px;
}
}
/* =========================================================
RESPONSIVO — 650px
========================================================= */
@media (max-width: 650px) {
.site-footer {
padding-top: 48px;
}
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 35px 25px;
padding-bottom: 40px;
}
.footer-brand {
grid-column: 1 / -1;
}
.footer-contact {
grid-column: 1 / -1;
}
.footer-bottom {
min-height: auto;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 0;
text-align: center;
gap: 12px;
}
}
/* =========================================================
RESPONSIVO — 480px
========================================================= */
@media (max-width: 480px) {
.footer-main {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-brand,
.footer-contact {
grid-column: auto;
}
.footer-logo img {
height: 44px;
}
.footer-logo-name {
font-size: 24px;
}
}
/* =========================================================
SISTEMA DE PÁGINAS — SCROLL SNAP
========================================================= */
html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
overflow-x: hidden;
overflow-y: auto;
}
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
overflow-x: hidden;
}
/* =========================================================
CADA PÁGINA
========================================================= */
.pagina,
section.h-100,
div.h-100 {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100svh;
scroll-snap-align: start;
scroll-snap-stop: always;
/*
IMPORTANTE:
não criar scroll interno.
*/
overflow-x: hidden;
overflow-y: visible;
scroll-margin-top: 0;
}
/* =========================================================
SEÇÕES PRINCIPAIS
========================================================= */
.hero-full,
.servico-full,
.contato-full,
.stats,
.regioes,
.parcerias,
.artigos,
.depoimentos {
position: relative;
min-height: 100vh;
min-height: 100svh;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow-x: hidden;
overflow-y: visible;
}
/* =========================================================
HEADER FIXO
========================================================= */
section {
position: relative;
scroll-margin-top: var(--header-height);
}