/* Fontes carregadas via + no de cada página (mais rápido no mobile do que @import). */
:root{
--bg: #F1ECE0;
--bg-deep: #14201A;
--ink: #1E2B24;
--ink-soft: #46564C;
--paper: #FAF7F0;
--accent: #8B6F3F;
--accent-soft: #B79A63;
--line: #C9BFA8;
--line-deep: rgba(250,247,240,0.18);
--serif: 'Fraunces', serif;
--sans: 'Inter', sans-serif;
--mono: 'IBM Plex Mono', monospace;
--wrap: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
font-weight:400;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{
max-width:var(--wrap);
margin:0 auto;
padding:0 32px;
}
::selection{background:var(--accent-soft); color:var(--paper);}
:focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
}
/* ---------- Eyebrow / labels ---------- */
.eyebrow{
font-family:var(--mono);
font-size:12px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--accent);
display:flex;
align-items:center;
gap:10px;
}
.eyebrow::before{
content:'';
width:22px;
height:1px;
background:var(--accent);
display:inline-block;
}
/* ---------- Header ---------- */
.site-header{
position:sticky;
top:0;
z-index:50;
background:rgba(241,236,224,0.86);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.site-header .wrap{
display:flex;
align-items:center;
justify-content:space-between;
height:84px;
}
.brand{
display:flex;
align-items:center;
gap:12px;
font-family:var(--serif);
font-size:19px;
letter-spacing:0.01em;
color:var(--ink);
}
.brand .seal{
width:34px;
height:34px;
flex-shrink:0;
}
.brand strong{font-weight:600;}
.brand span{
display:block;
font-family:var(--mono);
font-size:10px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--ink-soft);
margin-top:2px;
}
.nav-links{
display:flex;
align-items:center;
gap:36px;
font-size:14px;
}
.nav-links a{
position:relative;
padding:4px 0;
color:var(--ink-soft);
transition:color .25s ease;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a::after{
content:'';
position:absolute;
left:0; right:0; bottom:-2px;
height:1px;
background:var(--accent);
transform:scaleX(0);
transform-origin:left;
transition:transform .3s ease;
}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{color:var(--ink);}
.nav-links a.nav-cta{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--ink);
color:var(--bg);
border:1px solid var(--ink);
padding:14px 28px;
border-radius:2px;
font-size:13px;
letter-spacing:0.02em;
transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nav-links a.nav-cta:hover{background:var(--paper); color:var(--ink);}
.nav-toggle{
display:none;
flex-direction:column;
justify-content:center;
gap:5px;
width:44px;
height:44px;
background:none;
border:none;
cursor:pointer;
padding:0;
}
.nav-toggle span{
display:block;
width:22px;
height:1px;
background:var(--ink);
transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:10px;
font-family:var(--sans);
font-size:14px;
letter-spacing:0.02em;
padding:15px 28px;
border-radius:2px;
transition:all .25s ease;
cursor:pointer;
border:1px solid transparent;
}
.btn-primary{
background:var(--ink);
color:var(--paper);
}
.btn-primary:hover{background:var(--accent);}
.btn-ghost{
border-color:var(--ink);
color:var(--ink);
}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.btn-arrow{transition:transform .25s ease;}
.btn:hover .btn-arrow{transform:translateX(4px);}
/* ---------- Hero ---------- */
.hero{
padding:96px 0 110px;
position:relative;
overflow:hidden;
}
.hero .wrap{
display:grid;
grid-template-columns:1.15fr 0.85fr;
gap:64px;
align-items:end;
}
.hero-kicker{margin-bottom:26px;}
.hero h1{
font-family:var(--serif);
font-weight:500;
font-size:clamp(38px, 4.6vw, 64px);
line-height:1.08;
letter-spacing:-0.01em;
color:var(--ink);
}
.hero h1 em{
font-style:italic;
font-weight:400;
color:var(--accent);
}
.hero-lede{
margin-top:26px;
font-size:17px;
color:var(--ink-soft);
max-width:46ch;
}
.hero-actions{
margin-top:38px;
display:flex;
gap:16px;
flex-wrap:wrap;
}
.hero-side{
border-left:1px solid var(--line);
padding-left:32px;
}
.hero-side p{
font-size:14px;
color:var(--ink-soft);
margin-bottom:22px;
}
.hero-stat{margin-bottom:22px;}
.hero-stat .num{
font-family:var(--serif);
font-size:30px;
color:var(--ink);
display:block;
}
.hero-stat .label{
font-family:var(--mono);
font-size:11px;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--accent);
}
/* ---------- Seal / signature motif ---------- */
.seal{
color:var(--accent);
}
.seal circle, .seal path{
vector-effect:non-scaling-stroke;
}
.divider{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
padding:0;
}
.divider .line{
height:1px;
flex:1;
background:var(--line);
}
.divider .seal{width:30px; height:30px;}
/* ---------- Section shell ---------- */
section{padding:104px 0;}
.section-head{
max-width:640px;
margin-bottom:56px;
}
.section-head h2{
font-family:var(--serif);
font-weight:500;
font-size:clamp(28px, 3vw, 40px);
margin-top:18px;
color:var(--ink);
}
.section-head p{
margin-top:16px;
color:var(--ink-soft);
font-size:16px;
max-width:52ch;
}
/* ---------- Services ---------- */
.services{background:var(--paper);}
.service-list{
border-top:1px solid var(--line);
}
.service-row{
display:grid;
grid-template-columns:90px 1fr;
gap:32px;
padding:34px 0;
border-bottom:1px solid var(--line);
align-items:baseline;
transition:background .3s ease;
}
.service-row:hover{background:var(--bg);}
.service-row .idx{
font-family:var(--mono);
font-size:13px;
color:var(--accent);
letter-spacing:0.08em;
}
.service-content h3{
font-family:var(--serif);
font-size:23px;
font-weight:500;
margin-bottom:10px;
}
.service-content p{
color:var(--ink-soft);
font-size:15px;
max-width:60ch;
}
.subtags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
}
.subtags .tag{
cursor:default;
padding:6px 14px;
font-size:11px;
}
.subtags .tag:hover{
border-color:var(--line);
color:var(--ink-soft);
background:transparent;
}
/* ---------- Process (docket steps) ---------- */
.process-list{
border-top:1px solid var(--line);
}
.process-item{
display:grid;
grid-template-columns:90px 1fr 1.3fr;
gap:32px;
padding:34px 0;
border-bottom:1px solid var(--line);
align-items:baseline;
}
.process-item .idx{
font-family:var(--mono);
font-size:13px;
color:var(--accent);
letter-spacing:0.08em;
}
.process-item h3{
font-family:var(--serif);
font-size:21px;
font-weight:500;
}
.process-item p{
color:var(--ink-soft);
font-size:15px;
}
/* ---------- About ---------- */
.about{background:var(--bg-deep); color:var(--paper);}
.about .eyebrow{color:var(--accent-soft);}
.about .eyebrow::before{background:var(--accent-soft);}
.about-grid{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:72px;
align-items:start;
}
.about h2{
font-family:var(--serif);
font-weight:500;
font-size:clamp(28px, 3vw, 40px);
margin-top:18px;
line-height:1.2;
}
.about-portrait{
aspect-ratio:4/5;
border:1px solid var(--line-deep);
border-radius:2px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
background:linear-gradient(160deg, #1c2a22, #0f1712);
}
.about-portrait img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
}
.about-portrait::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(15,23,18,0) 55%, rgba(15,23,18,0.75) 100%);
pointer-events:none;
}
.about-portrait .seal-lg{
width:120px; height:120px;
color:var(--accent-soft);
opacity:0.9;
}
.about-portrait .initials{
position:absolute;
bottom:24px; left:24px;
z-index:1;
font-family:var(--mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:rgba(250,247,240,0.6);
}
.about-body p{
color:rgba(250,247,240,0.78);
font-size:16px;
margin-bottom:18px;
max-width:56ch;
}
.about-creds{
margin-top:34px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
border-top:1px solid var(--line-deep);
padding-top:28px;
}
.about-creds div span{
display:block;
}
.about-creds .label{
font-family:var(--mono);
font-size:11px;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--accent-soft);
margin-bottom:6px;
}
.about-creds .value{
font-family:var(--serif);
font-size:17px;
}
/* ---------- Blog teaser ---------- */
.blog-teaser-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}
.post-card{
border-top:1px solid var(--line);
padding-top:22px;
}
.post-card .meta{
font-family:var(--mono);
font-size:11px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--accent);
display:flex;
gap:10px;
}
.post-card h3{
font-family:var(--serif);
font-size:20px;
font-weight:500;
margin:14px 0 10px;
line-height:1.3;
}
.post-card p{
color:var(--ink-soft);
font-size:14.5px;
}
.post-card .read{
display:inline-block;
margin-top:14px;
font-size:13px;
color:var(--ink);
border-bottom:1px solid var(--accent);
}
/* ---------- Contact ---------- */
.contact{background:var(--paper);}
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:72px;
}
.contact h2{
font-family:var(--serif);
font-weight:500;
font-size:clamp(28px, 3vw, 40px);
margin-top:18px;
max-width:14ch;
}
.contact-lede{
margin-top:20px;
color:var(--ink-soft);
max-width:46ch;
}
.contact-list{margin-top:34px;}
.contact-list li{
display:flex;
justify-content:space-between;
padding:18px 0;
border-top:1px solid var(--line);
font-size:15px;
}
.contact-list li:last-child{border-bottom:1px solid var(--line);}
.contact-list .label{
font-family:var(--mono);
font-size:11px;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--ink-soft);
}
.contact-list .value a:hover{color:var(--accent);}
.form{
background:var(--bg);
border:1px solid var(--line);
padding:40px;
border-radius:2px;
}
.field{margin-bottom:22px;}
.field label{
display:block;
font-family:var(--mono);
font-size:11px;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--ink-soft);
margin-bottom:8px;
}
.field input, .field textarea, .field select{
width:100%;
background:transparent;
border:none;
border-bottom:1px solid var(--line);
padding:10px 2px;
font-family:var(--sans);
font-size:15px;
color:var(--ink);
resize:vertical;
transition:border-color .25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
border-color:var(--accent);
}
.field textarea{min-height:96px;}
.form .btn-primary{width:100%; justify-content:center; margin-top:6px;}
.hp-field{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
.form-note{
margin-top:16px;
font-size:12.5px;
color:var(--ink-soft);
}
/* ---------- Footer ---------- */
.site-footer{
background:var(--bg-deep);
color:rgba(250,247,240,0.7);
padding:56px 0 32px;
}
.footer-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
flex-wrap:wrap;
gap:32px;
padding-bottom:36px;
border-bottom:1px solid var(--line-deep);
}
.footer-brand{
font-family:var(--serif);
font-size:20px;
color:var(--paper);
}
.footer-links{
display:flex;
gap:48px;
flex-wrap:wrap;
}
.footer-links h4{
font-family:var(--mono);
font-size:11px;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--accent-soft);
margin-bottom:14px;
}
.footer-links a{
display:block;
font-size:14px;
margin-bottom:10px;
color:rgba(250,247,240,0.7);
transition:color .2s ease;
}
.footer-links a:hover{color:var(--paper);}
.footer-bottom{
display:flex;
justify-content:space-between;
padding-top:24px;
font-size:12.5px;
color:rgba(250,247,240,0.45);
flex-wrap:wrap;
gap:12px;
}
/* ---------- Blog page specific ---------- */
.blog-hero{padding:80px 0 40px;}
.blog-hero h1{
font-family:var(--serif);
font-weight:500;
font-size:clamp(34px, 4.4vw, 54px);
margin-top:18px;
max-width:16ch;
}
.blog-hero p{
margin-top:18px;
color:var(--ink-soft);
max-width:52ch;
font-size:16px;
}
.blog-filter{
display:flex;
gap:10px;
flex-wrap:wrap;
padding:36px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.tag{
font-family:var(--mono);
font-size:11.5px;
letter-spacing:0.06em;
text-transform:uppercase;
padding:8px 16px;
border:1px solid var(--line);
border-radius:20px;
color:var(--ink-soft);
transition:all .2s ease;
cursor:pointer;
}
.tag.is-active, .tag:hover{
border-color:var(--ink);
color:var(--ink);
background:var(--paper);
}
.registry{padding:20px 0 40px;}
.registry-item{
display:grid;
grid-template-columns:120px 1fr 200px;
gap:32px;
padding:38px 0;
border-bottom:1px solid var(--line);
align-items:start;
}
.registry-item .date{
font-family:var(--mono);
font-size:12.5px;
color:var(--ink-soft);
letter-spacing:0.04em;
}
.registry-item .date span{
display:block;
color:var(--accent);
font-size:11px;
letter-spacing:0.1em;
text-transform:uppercase;
margin-top:6px;
}
.registry-item h2{
font-family:var(--serif);
font-weight:500;
font-size:24px;
line-height:1.3;
margin-bottom:10px;
}
.registry-item p{
color:var(--ink-soft);
font-size:15px;
}
.registry-item .go{
justify-self:end;
align-self:center;
font-size:13px;
color:var(--ink);
border-bottom:1px solid var(--accent);
white-space:nowrap;
}
.blog-cta{
background:var(--bg-deep);
color:var(--paper);
padding:80px 0;
text-align:center;
}
.blog-cta h2{
font-family:var(--serif);
font-weight:500;
font-size:clamp(26px,3vw,36px);
max-width:20ch;
margin:18px auto 30px;
}
.blog-cta .eyebrow{justify-content:center; color:var(--accent-soft);}
.blog-cta .eyebrow::before{display:none;}
/* ---------- WhatsApp icon (inline em botões) ---------- */
.icon-wa{
width:17px;
height:17px;
flex-shrink:0;
}
/* ---------- Botão flutuante do WhatsApp ---------- */
.whatsapp-fab{
position:fixed;
right:24px;
bottom:24px;
z-index:80;
width:58px;
height:58px;
border-radius:50%;
background:var(--ink);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 28px rgba(15,23,18,0.4);
transition:transform .25s ease, background .25s ease;
}
.whatsapp-fab:hover{
background:var(--accent);
transform:translateY(-3px);
}
.whatsapp-fab .icon-wa{
width:26px;
height:26px;
color:var(--paper);
}
@media (max-width: 560px){
.whatsapp-fab{
right:16px;
bottom:16px;
width:52px;
height:52px;
}
.whatsapp-fab .icon-wa{width:24px; height:24px;}
}
/* ---------- Página de artigo individual ---------- */
.wrap-narrow{max-width:760px;}
.article-section{padding:64px 0 40px;}
.back-link{
display:inline-block;
font-family:var(--mono);
font-size:12.5px;
letter-spacing:0.04em;
color:var(--ink-soft);
margin-bottom:32px;
transition:color .2s ease;
}
.back-link:hover{color:var(--ink);}
#article-content .eyebrow{margin-bottom:18px;}
#article-content h1{
font-family:var(--serif);
font-weight:500;
font-size:clamp(30px, 4vw, 46px);
line-height:1.18;
}
.article-meta{
margin-top:18px;
font-family:var(--mono);
font-size:12.5px;
color:var(--ink-soft);
letter-spacing:0.04em;
padding-bottom:34px;
border-bottom:1px solid var(--line);
}
.article-body{
margin-top:34px;
font-size:17px;
line-height:1.8;
color:var(--ink);
}
.article-body p{
margin-bottom:22px;
max-width:66ch;
}
.article-body p:last-child{margin-bottom:0;}
/* ---------- Responsive ---------- */
@media (max-width: 900px){
.nav-links{
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
position:absolute;
top:84px; left:0; right:0;
background:var(--bg);
border-bottom:1px solid var(--line);
padding:8px 20px 20px;
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
}
.nav-links.is-open{max-height:420px;}
.nav-links a{
padding:16px 4px;
border-top:1px solid var(--line);
font-size:16px;
}
.nav-links a.nav-cta{
margin-top:14px;
border:1px solid var(--ink);
text-align:center;
}
.nav-toggle{display:flex;}
.hero .wrap{grid-template-columns:1fr;}
.hero-side{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:28px; margin-top:8px;}
.service-row{grid-template-columns:60px 1fr;}
.process-item{grid-template-columns:60px 1fr; grid-template-areas:"idx title" "." "text"; }
.process-item p{grid-column:1/-1;}
.about-grid{grid-template-columns:1fr;}
.about-portrait{max-width:280px;}
.about-portrait img{object-position:center center;}
.blog-teaser-grid{grid-template-columns:1fr; gap:32px;}
.contact-grid{grid-template-columns:1fr; gap:48px;}
.registry-item{grid-template-columns:1fr; gap:10px;}
.registry-item .go{justify-self:start;}
.footer-top{flex-direction:column;}
.tag{padding:10px 16px; min-height:44px; display:inline-flex; align-items:center;}
.btn{min-height:48px;}
}
@media (max-width: 560px){
.wrap{padding:0 20px;}
section{padding:72px 0;}
.hero{padding:56px 0 72px;}
}