/* ============================================================
CLS PREVENTION — aspect-ratio nas imagens da marca
Reserva espaço no layout antes do PNG carregar.
NÃO usar rules globais de img{height:auto} — quebram
overrides de altura explícita em .brand-mark etc.
============================================================ */
.brand .brand-mark{aspect-ratio:1/1}
.brand .brand-wordmark{aspect-ratio:900/183}
.colophon img{aspect-ratio:1/1}
/* ============================================================
FONTS — Cormorant Garamond + Mulish via bunny.net (GDPR EU CDN)
Subset latin + latin-ext apenas (PT/EN). woff2 nativo,
font-display: swap. Self-host-equivalent para Lighthouse 100.
============================================================ */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
src:url(https://fonts.bunny.net/cormorant-garamond/files/cormorant-garamond-latin-500-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
src:url(https://fonts.bunny.net/cormorant-garamond/files/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
src:url(https://fonts.bunny.net/cormorant-garamond/files/cormorant-garamond-latin-600-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
src:url(https://fonts.bunny.net/cormorant-garamond/files/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
src:url(https://fonts.bunny.net/cormorant-garamond/files/cormorant-garamond-latin-400-italic.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
src:url(https://fonts.bunny.net/cormorant-garamond/files/cormorant-garamond-latin-ext-400-italic.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;
src:url(https://fonts.bunny.net/mulish/files/mulish-latin-400-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;
src:url(https://fonts.bunny.net/mulish/files/mulish-latin-ext-400-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:500;font-display:swap;
src:url(https://fonts.bunny.net/mulish/files/mulish-latin-500-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Mulish';font-style:normal;font-weight:500;font-display:swap;
src:url(https://fonts.bunny.net/mulish/files/mulish-latin-ext-500-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;
src:url(https://fonts.bunny.net/mulish/files/mulish-latin-600-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;
src:url(https://fonts.bunny.net/mulish/files/mulish-latin-ext-600-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;
src:url(https://fonts.bunny.net/mulish/files/mulish-latin-700-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;
src:url(https://fonts.bunny.net/mulish/files/mulish-latin-ext-700-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ============================================================
RM&B — Raposo Magalhães & Barreiros
Sistema de design — escuro / editorial
============================================================ */
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Acessibilidade: links dentro de prose têm underline discreto para não
dependerem só de cor (WCAG 1.4.1). Nav, botões, cards e classes
utilitárias (.link-line, .btn, .nav-a) ficam intactos. */
p a:not(.link-line):not(.btn):not(.nav-a),
.notes-body a:not(.link-line):not(.btn),
.prose a:not(.link-line):not(.btn),
.footer-bar a:not(.link-line):not(.btn),
address a{
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:.18em;
text-decoration-color:rgba(243,241,236,.35);
transition:text-decoration-color .3s var(--ease);
}
p a:hover, .notes-body a:hover, .prose a:hover, .footer-bar a:hover, address a:hover{
text-decoration-color:currentColor;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:#fff}
/* ---------- Tokens ---------- */
:root{
--bg:#0d0d0f;
--bg-soft:#121216;
--panel:#17171c;
--panel-2:#1e1e24;
--line:rgba(243,241,236,.10);
--line-strong:rgba(243,241,236,.20);
--ink:#f3f1ec;
--ink-70:rgba(243,241,236,.78); /* subiu de .70 para melhorar contraste WCAG AA */
--ink-45:rgba(243,241,236,.62); /* subiu de .55 para melhorar contraste WCAG AA */
--ink-30:rgba(243,241,236,.30);
/* Paleta orientada para o BRAND prevalecer.
#4995FF é a cor verificada da marca e domina em tudo o que é
visualmente protagonista (botões sólidos, text accents, marks).
#0066CC é a variante mais escura, reservada para detalhes finos
— hairlines, tracinhos de eyebrow, hover overlay dos botões.
Ambos partilham o mesmo hue (213°), mudam só em lightness.
deep #4995FF → BRAND. Solid CTAs, brand stamps grandes.
accent #0066CC → variante. Tracinhos, hover bg, divisores finos.
bright #4995FF → BRAND. Text accent, partner names, .mk, links. */
--accent:#0066CC;
--accent-deep:#4995FF;
--accent-bright:#4995FF;
--accent-dim:rgba(73,149,255,.14);
--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--sans:'Mulish','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--shell:1320px;
--ease:cubic-bezier(.22,.61,.36,1);
--pad:clamp(22px,5vw,80px);
}
/* ---------- Base ---------- */
body{
font-family:var(--sans);
background:var(--bg);
color:var(--ink);
font-size:16px;
line-height:1.6;
font-weight:400;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
/* ---------- Skip link (acessibilidade) ---------- */
.skip-link{
position:absolute;left:-9999px;top:0;z-index:1000;
background:var(--accent-deep);color:#fff;
padding:12px 18px;border-radius:2px;
font-family:var(--sans);font-size:.82rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;
}
.skip-link:focus{left:16px;top:16px;outline:2px solid var(--accent-bright);outline-offset:2px}
/* ---------- Focus-visible global ----------
Outline + halo subtil (regra A11Y-05). Em fundo escuro o offset
precisa de mais respiro; o box-shadow desenha um anel suave que
diferencia o foco da borda do próprio elemento. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
outline:2px solid var(--accent-bright);
outline-offset:4px;
border-radius:2px;
box-shadow:0 0 0 6px rgba(73,149,255,.18);
}
.btn:focus-visible{outline-offset:5px}
.svc-row:focus-visible{outline-offset:-2px; box-shadow:none}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad);width:100%}
/* grain / vignette ambience */
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(120% 80% at 75% 0%,rgba(73,149,255,.10),transparent 60%),
radial-gradient(80% 60% at 0% 100%,rgba(73,149,255,.06),transparent 70%);
}
/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.015em;
/* equilibra as quebras de linha automaticamente — evita uma última
linha curta e o "rio" tipográfico que aparecia nos h2 do hero/secções. */
text-wrap:balance}
.display{
font-family:var(--serif);font-weight:500;
/* line-height 1.05 evita cortar descenders (g, y, p, j) de itálicos como "signature" */
font-size:clamp(2.9rem,8vw,7rem);line-height:1.05;letter-spacing:-.025em;
text-wrap:balance;
padding-bottom:.06em;
}
.h-xl{font-size:clamp(2.3rem,5.4vw,4.4rem);max-width:18ch}
.h-lg{font-size:clamp(1.9rem,3.6vw,3rem);max-width:22ch}
.h-md{font-size:clamp(1.5rem,2.4vw,2.1rem)}
em,.italic{font-style:italic}
.serif{font-family:var(--serif)}
.lead{font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.62;color:var(--ink-70)}
p{color:var(--ink-70)}
strong{color:var(--ink);font-weight:600}
.eyebrow{
display:flex;align-items:center;gap:.7em;
font-family:var(--sans);font-size:.72rem;font-weight:500;
text-transform:uppercase;letter-spacing:.26em;color:var(--ink-45);
}
.eyebrow::before{
content:"";width:34px;height:1px;background:var(--accent);
display:inline-block;flex:none;
}
.eyebrow.is-plain::before{display:none}
.eyebrow.center{justify-content:center}
.index-tag{
font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.22em;
color:var(--accent-bright);
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:.7em;
font-family:var(--sans);font-size:.82rem;font-weight:500;
text-transform:uppercase;letter-spacing:.16em;
padding:1.05em 1.7em;border:1px solid var(--line-strong);
border-radius:2px;color:var(--ink);position:relative;overflow:hidden;
transition:color .4s var(--ease),border-color .4s var(--ease);
white-space:nowrap;
}
.btn .arrow{transition:transform .4s var(--ease)}
.btn::after{
content:"";position:absolute;inset:0;z-index:-1;
background:var(--accent);transform:translateY(101%);
transition:transform .45s var(--ease);
}
.btn:hover{border-color:var(--accent);color:#fff}
.btn:hover::after{transform:translateY(0)}
.btn:hover .arrow{transform:translateX(5px)}
.btn--solid{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;font-weight:600}
.btn--solid::after{background:var(--accent-bright)}
.btn--solid:hover{color:#0d0d0f}
.link-line{
display:inline-flex;align-items:center;gap:.55em;
font-family:var(--sans);font-size:.78rem;font-weight:500;
text-transform:uppercase;letter-spacing:.18em;color:var(--ink);
padding-bottom:.4em;position:relative;
}
.link-line::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
background:var(--line-strong);
}
.link-line::before{
content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
background:var(--accent);transition:width .45s var(--ease);z-index:1;
}
.link-line:hover::before{width:100%}
.link-line .arrow{transition:transform .4s var(--ease)}
.link-line:hover .arrow{transform:translateX(5px)}
/* ---------- Header ---------- */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:90;
transition:background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
background:rgba(13,13,15,.78);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-bottom-color:var(--line);
}
.header-inner{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
gap:24px;padding-block:22px;transition:padding .5s var(--ease);
}
.is-scrolled .header-inner{padding-block:14px}
.brand{display:flex;align-items:center;gap:14px;z-index:2}
.brand .brand-mark{
height:38px;width:auto;
transition:height .5s var(--ease);
flex:none;
}
.brand .brand-wordmark{
height:30px;width:auto;
transition:height .5s var(--ease),opacity .5s var(--ease);
flex:none;
/* opacity ligeiramente reduzida para o wordmark não competir com o
monograma; ambos partilham o mesmo cream off-white */
opacity:.92;
/* branding oficial RM&B: SEM divisor entre monograma e wordmark */
}
.is-scrolled .brand .brand-mark{height:30px}
.is-scrolled .brand .brand-wordmark{height:24px;opacity:.85}
@media (max-width:780px){
/* em mobile esconde o wordmark, mantém apenas o monograma para
poupar espaço horizontal (o nome aparece de novo na hero) */
.brand .brand-wordmark{display:none}
}
.brand .brand-sub{
font-family:var(--sans);font-size:.6rem;font-weight:500;
text-transform:uppercase;letter-spacing:.24em;color:var(--ink-45);
border-left:1px solid var(--line-strong);padding-left:14px;line-height:1.4;
max-width:120px;
}
.nav{display:flex;align-items:center;gap:38px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
font-size:.8rem;font-weight:500;letter-spacing:.05em;
color:var(--ink-70);position:relative;padding:6px 0;
transition:color .35s var(--ease);
}
.nav-links a::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
background:var(--accent);transition:width .4s var(--ease);
}
.nav-links a:hover,.nav-links a.is-active{color:var(--ink)}
.nav-links a.is-active::after,.nav-links a:hover::after{width:100%}
.lang-switch{display:flex;align-items:center;gap:2px;
border:1px solid var(--line-strong);border-radius:2px;padding:3px}
.lang-switch button{
font-size:.68rem;font-weight:600;letter-spacing:.1em;
padding:5px 9px;border-radius:1px;color:var(--ink-45);
transition:background .3s,color .3s;
}
.lang-switch button.is-active{background:var(--accent);color:#fff}
.menu-toggle{display:none;width:42px;height:42px;flex:none;
border:1px solid var(--line-strong);border-radius:2px;
align-items:center;justify-content:center;z-index:2}
.menu-toggle span{display:block;width:17px;height:1.5px;background:var(--ink);
position:relative;transition:.3s var(--ease)}
.menu-toggle span::before,.menu-toggle span::after{
content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);
transition:.3s var(--ease)}
.menu-toggle span::before{top:-5px}
.menu-toggle span::after{top:5px}
.menu-open .menu-toggle span{background:transparent}
.menu-open .menu-toggle span::before{top:0;transform:rotate(45deg)}
.menu-open .menu-toggle span::after{top:0;transform:rotate(-45deg)}
/* mobile overlay menu — reserva espaço para o header (100px) para
os items não passarem por trás do logo/toggles. Scroll interno
se o conteúdo for mais alto que o viewport. */
.mobile-menu{
position:fixed;inset:0;z-index:80;background:var(--bg-soft);
display:flex;flex-direction:column;justify-content:flex-start;
padding:100px var(--pad) 40px;
overflow-y:auto;
opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
/* No viewport curto, encosta ao topo com scroll; no viewport alto,
distribui o espaço mas mantém o offset ao header. */
@media (min-height:720px){
.mobile-menu{ justify-content:center; padding-top:100px }
}
.menu-open .mobile-menu{opacity:1;visibility:visible}
.mobile-menu a{
font-family:var(--serif);font-size:clamp(2rem,9vw,3.4rem);font-weight:500;
letter-spacing:-.02em;padding:.18em 0;color:var(--ink);
display:flex;align-items:baseline;gap:.5em;
opacity:0;transform:translateY(24px);
}
.menu-open .mobile-menu a{animation:menuIn .6s var(--ease) forwards}
.mobile-menu a .mm-n{font-family:var(--sans);font-size:.8rem;color:var(--accent-bright);
font-weight:500;letter-spacing:.06em}
.mobile-menu a:nth-child(1){animation-delay:.08s}
.mobile-menu a:nth-child(2){animation-delay:.14s}
.mobile-menu a:nth-child(3){animation-delay:.20s}
.mobile-menu a:nth-child(4){animation-delay:.26s}
.mobile-menu a:nth-child(5){animation-delay:.32s}
.mobile-menu a:nth-child(6){animation-delay:.38s}
@keyframes menuIn{to{opacity:1;transform:translateY(0)}}
.mobile-menu .mm-foot{margin-top:48px;color:var(--ink-45);font-size:.8rem;
display:flex;flex-direction:column;gap:6px}
/* ---------- Hero (home) ---------- */
.hero{
position:relative;z-index:1;min-height:100svh;display:flex;
align-items:flex-end;overflow:hidden;
}
.hero-glow{
position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
width:min(70vw,720px);aspect-ratio:1;z-index:0;
background:radial-gradient(circle,rgba(73,149,255,.20),transparent 62%);
filter:blur(40px);
}
/* ---------- Hero — coluna única, texto centrado verticalmente,
bola de partículas a cobrir todo o hero como fundo cinético ---------- */
.hero-inner{
position:relative;z-index:3;width:100%;
display:grid;grid-template-rows:1fr auto;
min-height:100svh;
padding-top:128px;padding-bottom:clamp(48px,9vh,120px);
}
.hero-content{
align-self:center;
display:flex;flex-direction:column;
gap:clamp(14px,2vh,26px);
}
/* hero usa a classe global .eyebrow (com o tracinho azul standard).
Aqui apenas damos espaço extra acima do display, específico do hero. */
.hero-content > .eyebrow{
margin-bottom:clamp(14px,2.4vh,30px);
}
/* trust mark — uma linha sob os CTAs, ancora local + tempo */
.trust{
font-family:var(--sans);font-size:.72rem;font-weight:500;
text-transform:uppercase;letter-spacing:.22em;
color:var(--ink-45);
margin-top:clamp(18px,2.5vh,30px);
display:flex;align-items:center;gap:.7em;flex-wrap:wrap;
}
.trust::before{
content:"";width:24px;height:1px;background:var(--accent);
display:inline-block;flex:none;
}
.hero h1{margin:0;max-width:15ch}
/* canvas de partículas: ocupa o hero inteiro, atrás do texto */
.particle-ball{
position:absolute;inset:0;
width:100%;height:100%;
z-index:1;pointer-events:none;
}
/* ---------- Hero visual — logomark com & animado ----------
Duas camadas do mesmo PNG oficial (logomark-white.png 352×400):
1) Base: clip-path remove o quadrante inferior-esquerdo (o &)
2) Overlay: clip-path mostra APENAS o & — esta camada oscila lento.
Posicionada absoluto DENTRO da .shell.hero-inner, alinhada à direita
e à altura do bloco lead+CTAs (não compete com o H1). */
.hero-visual{
position:absolute;
right:var(--pad); /* alinha com o padding interno do shell */
/* ancorada de baixo: o bottom-edge alinha-se com o trust-line / CTAs,
o logo sobe a partir daí — fica ao nível do lead+botões */
bottom:clamp(110px,18vh,200px);
width:clamp(170px,13vw,230px);
z-index:2;
pointer-events:none;
}
.hero-logomark{
position:relative;
width:100%;
aspect-ratio:352/400;
}
.logomark-base,
.logomark-amp{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:contain;
user-select:none;
}
/* Base: oculta o quadrante inferior-esquerdo (onde está o &) */
.logomark-base{
clip-path:polygon(0% 0%,100% 0%,100% 100%,52% 100%,52% 47%,0% 47%);
opacity:0;
animation:hero-logo-fade 1.4s var(--ease) .9s forwards;
}
/* Overlay: mostra APENAS o quadrante inferior-esquerdo (o &) */
.logomark-amp{
clip-path:polygon(0% 47%,52% 47%,52% 100%,0% 100%);
transform-origin:24% 74%; /* centro visual do & */
opacity:0;
animation:hero-logo-amp-in 1.8s var(--ease) 1.6s forwards,
hero-logo-amp-sway 16s ease-in-out 4s infinite;
}
@keyframes hero-logo-fade{to{opacity:1}}
@keyframes hero-logo-amp-in{
from{opacity:0;transform:rotate(6deg) scale(.94)}
to {opacity:1;transform:rotate(0) scale(1)}
}
@keyframes hero-logo-amp-sway{
0% {transform:rotate(-2deg) scale(1)}
25% {transform:rotate(0) scale(1.02)}
50% {transform:rotate(2deg) scale(1)}
75% {transform:rotate(0) scale(.98)}
100% {transform:rotate(-2deg) scale(1)}
}
/* Em .page-hero (páginas internas) o hero-visual usa a mesma regra
de bottom-anchor que o hero da home — gesto de marca coerente
entre páginas. Tamanho reduzido + posição mais baixa para que
UMA única ocorrência do monograma sustente visualmente a transição
entre a page-hero e a secção seguinte (sem competir com o texto). */
.page-hero > .shell{position:relative}
.page-hero .hero-visual{
bottom:clamp(4px,1vh,18px);
width:clamp(90px,7.5vw,130px);
}
/* Em páginas internas, a primeira secção logo a seguir à page-hero
abdica do seu monograma decorativo: o hero-visual ali ao lado já faz
esse trabalho e sustenta a transição entre as duas zonas. */
.page-hero + .section.mark-tr > .shell::after,
.page-hero + .section.mark-bl > .shell::after{display:none}
@media (max-width:1100px){
.hero-visual{display:none}
}
@media (prefers-reduced-motion:reduce){
.logomark-base,.logomark-amp{opacity:1;animation:none;transform:none}
}
/* .ln funciona como máscara vertical para a animação "rise" na entrada.
overflow:hidden clip os descenders (g, j, y) de itálicos como "signature".
padding-bottom cria espaço para os descenders sem quebrar a máscara superior. */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .ln>span{display:block;transform:translateY(102%);
animation:rise 1s var(--ease) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.24s}
@keyframes rise{to{transform:translateY(0)}}
.hero-intro{
display:flex;flex-direction:column;gap:clamp(20px,3vh,32px);
margin-top:clamp(18px,3vh,40px);
}
/* botão secundário sobre o hero: aumenta o contraste do contorno
para não se perder na profundidade da rede de partículas */
.hero .btn:not(.btn--solid){border-color:var(--ink-45);color:#fff}
.hero .btn:not(.btn--solid):hover{border-color:var(--accent-bright)}
.hero-foot{
/* row 2 da grelha do hero — alinha à esquerda, abaixo do conteúdo */
display:flex;justify-content:flex-start;align-items:flex-end;
gap:40px;flex-wrap:wrap;
}
.hero-lead{max-width:42ch;opacity:0;animation:fade 1.1s var(--ease) .6s forwards}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;opacity:0;
animation:fade 1.1s var(--ease) .8s forwards}
@keyframes fade{to{opacity:1}}
.scroll-cue{
display:flex;align-items:center;gap:12px;font-size:.68rem;
text-transform:uppercase;letter-spacing:.22em;color:var(--ink-45);
}
.scroll-cue .bar{width:1px;height:46px;background:var(--line-strong);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;inset:0;background:var(--accent);
transform:translateY(-100%);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}45%,55%{transform:translateY(0)}100%{transform:translateY(100%)}}
/* ---------- Section scaffold ---------- */
.section{position:relative;z-index:2;padding-block:clamp(80px,12vh,170px)}
.section-soft{background:var(--bg-soft)}
/* ---------- Variante cream / bone — pausa editorial uma vez por página ----------
Reescreve as variáveis de cor para que todos os componentes (banners,
cards, eyebrows, accents) rendam invertidos sobre cream, sem precisar
de regras dedicadas por componente. */
.section-light{
background:#EEE7D2;color:#111114;
/* fundos — tom de papel timbrado, quente sem ser amarelo */
--bg:#EEE7D2;
--bg-soft:#F2ECD9;
--panel:#E4DCC2;
--panel-2:#DAD1B4;
/* tinta — preto puro da marca para máxima legibilidade premium */
--ink:#111114;
--ink-70:rgba(17,17,20,.78);
--ink-45:rgba(17,17,20,.55);
--ink-30:rgba(17,17,20,.30);
/* linhas — mais visíveis sobre cream */
--line:rgba(17,17,20,.14);
--line-strong:rgba(17,17,20,.24);
/* azul navy clássico — mesma família do dark, escurecido p/ cream */
--accent:#1F3A8A;
--accent-deep:#142964;
--accent-bright:#2A4798;
--accent-dim:rgba(0,102,204,.08);
}
/* botão outline sobre cream — recupera a tinta dark e linha visível */
.section-light .btn:not(.btn--solid){color:var(--ink);border-color:var(--ink-45)}
.section-light .btn:not(.btn--solid):hover{border-color:var(--accent);color:#fff}
.section-light .btn:not(.btn--solid)::after{background:var(--accent)}
.section-head{
display:grid;grid-template-columns:1fr 1fr;gap:40px;
align-items:end;margin-bottom:clamp(48px,7vh,90px);
}
.section-head .lead{max-width:46ch}
.divider{height:1px;background:var(--line);width:100%}
/* ---------- Home: services strip ---------- */
.svc-list{border-top:1px solid var(--line)}
.svc-row{
display:grid;grid-template-columns:auto 1fr auto;
gap:clamp(20px,3vw,52px);
align-items:center;padding:clamp(24px,3.8vh,46px) 0;
border-bottom:1px solid var(--line);position:relative;
transition:padding-left .5s var(--ease);
}
.svc-row::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:0;
background:var(--accent-dim);transition:width .5s var(--ease);z-index:-1;
}
.svc-row:hover{padding-left:26px}
.svc-row:hover::before{width:100%}
.svc-row .num{font-size:.74rem;letter-spacing:.2em;color:var(--accent-bright)}
.svc-row .svc-text{display:flex;flex-direction:column;gap:6px}
.svc-row .svc-kicker{
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:.95rem;letter-spacing:.005em;
color:var(--accent-bright);
}
.svc-row .svc-name{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.5rem);
font-weight:500;letter-spacing:-.02em}
.svc-row .svc-desc{color:var(--ink-45);max-width:34ch;font-size:.92rem}
.svc-row .svc-mark{width:34px;height:34px;border:1px solid var(--line-strong);
border-radius:50%;display:flex;align-items:center;justify-content:center;
transition:.45s var(--ease);flex:none}
.svc-row:hover .svc-mark{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg)}
/* ---------- Generic feature split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,100px);align-items:center}
.split.rev{direction:rtl}
.split.rev>*{direction:ltr}
/* modifier para casos em que a coluna do mapa é o lead visual da secção
(ex.: secção internacional na home — o mapa precisa de mais presença). */
.split.split--map{grid-template-columns:1.35fr .85fr}
.split.split--map.rev{grid-template-columns:.85fr 1.35fr}
/* alinhar pelo topo quando a coluna da direita combina vários blocos
(ex.: mapa + banner) e fica naturalmente mais alta que a esquerda. */
.split.split--top{align-items:start}
.stat-row{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap;margin-top:44px}
.stat .n{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.8rem);
font-weight:500;line-height:1;letter-spacing:-.02em}
.stat .n em{color:var(--accent-bright)}
.stat .l{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;
color:var(--ink-45);margin-top:10px;max-width:18ch}
.figure{position:relative;overflow:hidden;border:1px solid var(--line)}
.figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.05)}
.figure::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 55%,rgba(13,13,15,.55))}
.figure-tag{position:absolute;left:0;bottom:0;z-index:2;padding:16px 20px;
font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-70)}
/* ---------- Cards grid ---------- */
.grid{display:grid;gap:2px;background:var(--line-strong)}
/* equal-height rows para que as matrizes leiam como uma unidade,
mesmo quando alguns cards têm descrição mais curta que outros. */
.grid.cols-2{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
.card{
background:var(--bg);padding:clamp(28px,3.4vw,46px);
display:flex;flex-direction:column;gap:14px;position:relative;
transition:background .5s var(--ease);min-height:100%;
}
.card:hover{background:var(--panel)}
.card .card-ix{font-size:.72rem;letter-spacing:.2em;color:var(--accent-bright)}
.card h3{font-size:1.4rem}
.card p{font-size:.92rem;color:var(--ink-45)}
.card .card-mark{width:36px;height:2px;background:var(--accent);margin-bottom:6px}
/* value cards */
.value{background:var(--bg);padding:clamp(26px,3vw,40px);
display:flex;flex-direction:column;gap:10px;transition:.5s var(--ease)}
.value:hover{background:var(--panel)}
.value .vk{font-family:var(--serif);font-size:1.45rem;font-style:italic;font-weight:500}
.value .vn{font-size:.72rem;letter-spacing:.2em;color:var(--accent-bright)}
.value p{font-size:.9rem;color:var(--ink-45)}
/* ---------- Partners ---------- */
.partner{
display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,68px);
align-items:start;
}
.partner+.partner{margin-top:clamp(60px,9vh,120px)}
.partner.rev{direction:rtl}
.partner.rev>*{direction:ltr}
.partner-photo{position:relative;border:1px solid var(--line-strong);overflow:hidden;
aspect-ratio:4/5;background:#0a0a0c;isolation:isolate}
.partner-photo img{position:relative;z-index:0;width:100%;height:100%;
object-fit:cover;object-position:top center;
/* fotografia em pleno — sem filter, sem overlay. as fotos de estúdio
partilham fundo e iluminação, não precisam de harmonização artificial. */
transition:transform 1.4s var(--ease)}
.partner:hover .partner-photo img{
transform:scale(1.025)}
/* moldura interior editorial — único detalhe permitido, remete para revista. */
.partner-photo .pp-frame{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.14);
pointer-events:none;z-index:3;transition:inset .6s var(--ease),border-color .6s var(--ease)}
.partner:hover .partner-photo .pp-frame{inset:18px;border-color:rgba(255,255,255,.22)}
.partner-role{font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;
color:var(--accent-bright);margin-bottom:14px}
.partner h3{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:8px}
.partner .partner-meta{display:flex;gap:24px;flex-wrap:wrap;margin:18px 0 22px;
padding:16px 0;border-block:1px solid var(--line)}
.partner .partner-meta div{font-size:.8rem;color:var(--ink-45)}
.partner .partner-meta span{display:block;color:var(--ink);font-family:var(--serif);
font-size:1.25rem;font-style:italic}
.partner-bio p{font-size:.95rem;margin-bottom:.85em}
.partner-bio p:last-child{margin-bottom:0}
/* coordinators */
.coord{background:var(--bg);padding:clamp(26px,3vw,40px);display:flex;
flex-direction:column;gap:8px;transition:.5s var(--ease)}
.coord:hover{background:var(--panel)}
.coord .ci{width:54px;height:54px;border:1px solid var(--line-strong);border-radius:50%;
display:flex;align-items:center;justify-content:center;font-family:var(--serif);
font-size:1.3rem;font-style:italic;margin-bottom:14px;color:var(--accent-bright)}
.coord h4{font-size:1.3rem;font-family:var(--serif)}
/* ---------- Practice areas ---------- */
.area-block+.area-block{margin-top:60px}
.area-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line-strong);
border:1px solid var(--line);margin-top:30px;grid-auto-rows:1fr}
.area{background:var(--bg);padding:clamp(22px,2.6vw,34px);transition:.5s var(--ease)}
.area:hover{background:var(--panel)}
.area h4{font-size:1.3rem;margin-bottom:12px;display:flex;gap:.6em;align-items:baseline}
.area h4 i{font-family:var(--sans);font-size:.7rem;font-style:normal;letter-spacing:.16em;
color:var(--accent-bright)}
.area .tags{display:flex;flex-wrap:wrap;gap:8px}
.area .tags span{font-size:.76rem;color:var(--ink-45);padding:5px 10px;
border:1px solid var(--line);border-radius:2px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips span{font-size:.82rem;color:var(--ink-70);padding:9px 14px;
border:1px solid var(--line);border-radius:2px;transition:.4s var(--ease)}
.chips span:hover{border-color:var(--accent);color:var(--ink);background:var(--accent-dim)}
/* ---------- Inner page hero ---------- */
.page-hero{position:relative;padding-top:200px;padding-bottom:clamp(50px,8vh,100px);
overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-5%;top:-20%;
width:520px;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(73,149,255,.16),transparent 65%);filter:blur(30px);
z-index:0;pointer-events:none}
/* o canvas de partículas vive ATRÁS do conteúdo da page-hero */
.page-hero .particle-ball{z-index:1}
.page-hero .page-particles{opacity:.55}
/* a .shell com o texto fica POR CIMA das partículas */
.page-hero > .shell{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.8rem,7vw,5.6rem);margin:.28em 0 .3em;max-width:22ch;text-wrap:balance}
.page-hero .lead{max-width:50ch}
.crumb{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45)}
.crumb b{color:var(--accent-bright);font-weight:500}
/* pull quote */
.pullquote{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.22;letter-spacing:-.015em;
max-width:22ch;
}
.pullquote .mk{color:var(--accent-bright)}
.banner{
border:1px solid var(--line);padding:clamp(38px,6vw,80px);
background:linear-gradient(140deg,var(--panel),var(--bg));position:relative;overflow:hidden;
}
.banner::before{content:"";position:absolute;right:-60px;bottom:-60px;width:280px;
aspect-ratio:1;border:1px solid var(--line);border-radius:50%}
.banner::after{content:"";position:absolute;right:10px;bottom:10px;width:160px;
aspect-ratio:1;border:1px solid var(--line);border-radius:50%}
/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:1px;background:var(--line);border:1px solid var(--line)}
.contact-cell{background:var(--bg);padding:clamp(28px,3.4vw,52px);
display:flex;flex-direction:column;gap:8px}
.contact-cell .ck{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
color:var(--ink-45);margin-bottom:8px}
.contact-cell .cv{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.9rem);
font-weight:500}
.contact-cell .cv a{transition:color .35s}
.contact-cell .cv a:hover{color:var(--accent-bright)}
.map-wrap{border:1px solid var(--line);overflow:hidden;position:relative;min-height:320px}
.map-wrap iframe{width:100%;height:100%;min-height:320px;border:0;filter:grayscale(1) invert(.92) contrast(.85)}
/* form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-45)}
.field input,.field textarea{
font-family:var(--sans);font-size:.95rem;color:var(--ink);
background:var(--panel);border:1px solid var(--line);border-radius:2px;
padding:14px 16px;transition:border-color .35s,background .35s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);
background:var(--panel-2)}
.field textarea{resize:vertical;min-height:130px}
.form-note{font-size:.78rem;color:var(--ink-45);margin-top:4px}
/* ---------- International — mapa-múndi animado ----------
Aspect natural 110/41 (não esticar — distorce continentes).
Para preencher a coluna usa-se um meta-bloco editorial por baixo. */
.worldmap-wrap{
position:relative;width:100%;aspect-ratio:110/41;
border:1px solid var(--line);background:rgba(124,135,196,.03);
}
.worldmap{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Bloco editorial sob o mapa: hub + jurisdições.
Preenche a coluna para alinhar com a altura do texto. */
.worldmap-meta{
margin-top:clamp(20px,2.6vh,32px);
display:flex;flex-direction:column;gap:18px;
}
.worldmap-meta .wm-hub{
display:flex;align-items:baseline;gap:14px;
padding-bottom:14px;border-bottom:1px solid var(--line);
}
.worldmap-meta .wm-hub-label{
font-family:var(--sans);font-size:.7rem;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;color:var(--ink-45);
flex:none;
}
.worldmap-meta .wm-hub-city{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:1.4rem;letter-spacing:-.005em;color:var(--ink);
}
.worldmap-meta .wm-jur{
display:flex;align-items:baseline;gap:14px;
font-family:var(--sans);font-size:.78rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
line-height:1.7;
}
.worldmap-meta .wm-jur-num{
font-family:var(--serif);font-style:italic;font-size:1.05rem;
color:var(--accent-bright);flex:none;
letter-spacing:0;text-transform:none;
}
.worldmap-meta .wm-jur-list{
color:var(--ink-70);
}
/* numbered list */
.steps{counter-reset:s;display:flex;flex-direction:column;gap:1px;background:var(--line);
border-block:1px solid var(--line)}
.step{background:var(--bg);padding:clamp(22px,3vw,38px);display:grid;
grid-template-columns:auto 1fr;gap:clamp(20px,3vw,46px);align-items:start;
transition:background .5s var(--ease)}
.step:hover{background:var(--panel)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);font-style:italic;
color:var(--accent-bright);line-height:1}
.step h4{font-size:1.35rem;margin-bottom:8px}
.step p{font-size:.92rem;color:var(--ink-45);max-width:52ch}
/* ---------- Selo de marca: gesto editorial discreto da RM&B ---------- */
/* (1) Letterhead seal — cada secção cream ganha um monograma na esquina,
como uma página de papel de carta selada. */
/* ---------- Page-marks: monograma decorativo por secção em zigue-zague ----------
Cada .section recebe .mark-tr (top-right) ou .mark-bl (bottom-left),
alternando ao longo da página. Cria um ritmo editorial unificado.
IMPORTANTE: o monograma vive no padding da secção (acima/abaixo do .shell),
NUNCA por trás do conteúdo. Horizontalmente alinha com a margem útil
do conteúdo (var(--pad) — flush com a primeira/última letra do texto). */
.mark-tr > .shell,
.mark-bl > .shell{position:relative}
.mark-tr > .shell::after,
.mark-bl > .shell::after{
content:"";
position:absolute;
width:clamp(48px,5vw,80px);height:clamp(48px,5vw,80px);
/* logomark branco por defeito (para fundos escuros) */
background:url('../img/logomark-white.png') no-repeat center / contain;
opacity:.10;pointer-events:none;z-index:0;
}
/* TR — assenta acima do conteúdo, no padding-top da secção */
.mark-tr > .shell::after{
bottom:100%;
right:var(--pad);
margin-bottom:clamp(20px,2.6vw,36px);
}
/* BL — assenta abaixo do conteúdo, no padding-bottom da secção */
.mark-bl > .shell::after{
top:100%;
left:var(--pad);
margin-top:clamp(20px,2.6vw,36px);
}
/* Em secções claras (.section-light) usa o logo escuro com opacidade
ligeiramente maior — contraste-adjusted */
.section-light.mark-tr > .shell::after,
.section-light.mark-bl > .shell::after{
background-image:url('../img/logomark-dark.png');
opacity:.10;
}
/* (2) Colofão — pequeno monograma centrado acima do eyebrow do CTA-band,
funciona como assinatura de fecho da página. */
.colophon{
display:block;width:clamp(34px,3.8vw,52px);
margin:0 auto clamp(20px,2.8vh,34px);
opacity:.55;position:relative;z-index:1;
}
.colophon img{display:block;width:100%;height:auto}
/* ---------- CTA band ---------- */
.cta-band{position:relative;z-index:2;text-align:center;
padding-block:clamp(80px,14vh,180px);overflow:hidden}
.cta-band::before{content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);width:min(80vw,640px);aspect-ratio:1;
background:radial-gradient(circle,rgba(73,149,255,.16),transparent 64%);filter:blur(36px)}
.cta-band h2{font-size:clamp(2.4rem,6vw,5rem);max-width:32ch;margin:.3em auto .6em}
.cta-band .lead{max-width:46ch;margin-inline:auto}
.cta-band .hero-cta{justify-content:center;margin-top:34px}
/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:2;border-top:1px solid var(--line);
background:var(--bg-soft);padding-top:clamp(60px,9vh,110px)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
padding-bottom:60px}
/* Compat: páginas que ainda usam 
directo no footer */
.footer-brand > img{height:64px;width:auto;max-width:220px;aspect-ratio:1500/493;object-fit:contain;margin-bottom:22px}
/* Footer lockup: monograma + wordmark em pares alinhados,
mesmo padrão do header mas em escala mais generosa para
dar presença institucional. Legível, proporcional, luxo silencioso. */
.footer-lockup{
display:flex;align-items:center;gap:18px;margin-bottom:22px;
padding-bottom:22px;border-bottom:1px solid var(--line);
max-width:360px;
}
.footer-mark{
height:52px;width:auto;flex:none;
aspect-ratio:1/1;
}
.footer-wordmark{
height:36px;width:auto;flex:none;
aspect-ratio:900/183;
opacity:.9;
/* branding oficial RM&B: SEM divisor entre monograma e wordmark */
}
@media (max-width:520px){
.footer-mark{height:44px}
.footer-wordmark{height:30px}
.footer-lockup{gap:10px}
}
.footer-brand .signature-mark{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:1.05rem;color:var(--accent-bright);
margin-bottom:18px;letter-spacing:.01em;
}
.footer-brand .signature-mark em{font-style:italic}
.footer-brand p{font-size:.9rem;color:var(--ink-45);max-width:34ch}
.footer-col h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
color:var(--ink-45);margin-bottom:18px;font-family:var(--sans);font-weight:500}
.footer-col a,.footer-col p{display:block;font-size:.9rem;color:var(--ink-70);
padding:5px 0;transition:color .3s}
.footer-col a:hover{color:var(--accent-bright)}
.footer-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,48px);
padding:26px 0;border-top:1px solid var(--line);font-size:.72rem;color:var(--ink-45);white-space:nowrap}
.footer-bar>:nth-child(1){text-align:left;white-space:nowrap}
.footer-bar>:nth-child(2){text-align:center;white-space:nowrap}
.footer-bar>:nth-child(3){text-align:right;white-space:nowrap}
.footer-bar a:hover{color:var(--ink)}
.footer-credit{letter-spacing:.02em}
.footer-credit a{color:var(--ink-70);border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.footer-credit a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.footer-credit .cxs-rmark{font-size:.65em;vertical-align:super;margin-left:1px;opacity:.8}
@media (max-width:1100px){
.footer-bar{font-size:.68rem;gap:clamp(14px,2vw,28px)}
}
@media (max-width:900px){
.footer-bar{grid-template-columns:1fr;text-align:center;white-space:normal;font-size:.72rem}
.footer-bar>:nth-child(1),.footer-bar>:nth-child(2),.footer-bar>:nth-child(3){text-align:center;white-space:normal}
}
/* ---------- Scroll progress (mobile / fallback) ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;
background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
/* ---------- Linha de assinatura (signature spine) ----------
Linha contínua que acompanha o utilizador da hero ao footer.
Cap em cima = pousar da pena; tail em baixo = levantar da pena.
A "tinta" sobre o traço cresce conforme o scroll. */
.spine{
position:fixed;
top:0;bottom:0;left:30px;
width:18px;
display:none;
flex-direction:column;align-items:center;
z-index:50;
pointer-events:none;
}
.spine-cap{
flex:none;width:5px;height:5px;border-radius:50%;
background:var(--accent-bright);
margin-top:104px;
box-shadow:0 0 14px rgba(73,149,255,.55),0 0 4px rgba(73,149,255,.9);
}
.spine-track{
flex:1;width:1px;
background:var(--line);
margin:8px 0 0;
position:relative;
overflow:hidden;
}
.spine-ink{
position:absolute;left:-0.5px;top:0;
width:2px;height:0;
background:linear-gradient(180deg,
var(--accent-bright) 0%,
var(--accent) 60%,
var(--accent-deep) 100%);
box-shadow:0 0 8px rgba(73,149,255,.4);
transition:height .14s linear;
}
.spine-tail{
flex:none;
width:18px;height:18px;
margin-bottom:96px;
color:var(--ink-45);
line-height:0;
}
.spine-tail svg{display:block;width:100%;height:100%;overflow:visible}
.spine-tail path{
stroke:currentColor;fill:none;
stroke-width:1;stroke-linecap:round;
vector-effect:non-scaling-stroke;
}
@media (min-width:1100px){
.spine{display:flex}
.progress{display:none} /* substituído pela spine em desktop */
}
@media (prefers-reduced-motion:reduce){
.spine-ink{transition:none}
}
/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(38px);
transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
.reveal[data-d="4"]{transition-delay:.4s}
.reveal[data-d="5"]{transition-delay:.5s}
/* ---------- Utilities ---------- */
.mt-s{margin-top:18px}.mt-m{margin-top:34px}.mt-l{margin-top:60px}
.center{text-align:center}
.maxw{max-width:60ch}
.muted{color:var(--ink-45)}
.accent{color:var(--accent-bright)}
.nowrap{white-space:nowrap}
.fadein{opacity:0;animation:fade 1s var(--ease) .3s forwards}
/* ---------- Responsive ---------- */
@media (max-width:1024px){
.footer-top{grid-template-columns:1fr 1fr}
.section-head{grid-template-columns:1fr;gap:20px}
.grid.cols-3{grid-template-columns:repeat(2,1fr)}
.partner,.partner.rev{grid-template-columns:1fr;direction:ltr}
.partner-photo{max-width:440px}
}
@media (max-width:860px){
.nav-links,.lang-switch.desk{display:none}
.menu-toggle{display:flex}
.split,.split.rev,.split.split--map,.split.split--map.rev{grid-template-columns:1fr;direction:ltr}
.contact-grid,.form-grid{grid-template-columns:1fr}
.svc-row{grid-template-columns:auto 1fr auto;gap:16px}
.svc-row .svc-desc{display:none}
.hero-top{flex-direction:column;gap:14px}
/* Secção internacional em mobile: texto centrado e sempre PRIMEIRO,
mapa a seguir na largura total da coluna (coerência do site,
mapa passa a ser o remate visual em vez de coluna paralela). */
.split.split--map{gap:clamp(28px,5vw,40px)}
.split.split--map>*:first-child{order:2} /* mapa desce */
.split.split--map>*:last-child{order:1;text-align:center}
.split.split--map .chips{justify-content:center}
.split.split--map .eyebrow{justify-content:center}
.split.split--map .worldmap-wrap{width:100%}
.split.split--map .worldmap-meta{align-items:center;text-align:center}
.split.split--map .worldmap-meta .wm-hub,
.split.split--map .worldmap-meta .wm-jur{justify-content:center}
}
@media (max-width:600px){
.grid.cols-2,.grid.cols-3,.area-grid{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr}
.brand .brand-sub{display:none}
.hero-foot{flex-direction:column;align-items:flex-start;gap:26px}
.step{grid-template-columns:1fr;gap:10px}
}
/* ---------- Cookie banner ---------- */
.cookie-banner{
position:fixed;left:50%;bottom:20px;
transform:translateX(-50%) translateY(28px);
z-index:120;max-width:calc(100% - 32px);width:min(620px,100%);
background:rgba(15,15,18,.96);backdrop-filter:blur(14px);
border:1px solid var(--line-strong);border-radius:3px;
padding:24px 26px;display:flex;flex-direction:column;gap:16px;
color:var(--ink);
opacity:0;visibility:hidden;
transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s,background .5s var(--ease),border-color .5s var(--ease);
}
/* Cookie banner em modo DIA — fundo cream escuro, texto azul brand,
coerente com o resto do design light. */
[data-theme="day"] .cookie-banner{
background:rgba(244,237,224,.98);
border-color:rgba(0,48,136,.18);
color:#1a1a1a;
box-shadow:0 8px 40px rgba(0,48,136,.08);
}
[data-theme="day"] .cookie-banner p{color:#2a2a2a}
[data-theme="day"] .cookie-banner .link-line{color:#003088}
.cookie-banner.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.cookie-banner p{font-size:.86rem;line-height:1.55;color:var(--ink-70);margin:0;max-width:60ch}
.cookie-banner-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cookie-banner .btn{font-size:.72rem;padding:.85em 1.4em}
.cookie-banner .link-line{font-size:.7rem}
@media (max-width:560px){
.cookie-banner{bottom:10px;padding:18px 20px}
.cookie-banner-actions{flex-direction:column;align-items:stretch}
.cookie-banner .btn,.cookie-banner .link-line{justify-content:center;text-align:center;width:100%}
}
/* ---------- Map placeholder (click-to-load) ---------- */
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0;
filter:grayscale(1) invert(.92) contrast(.85)}
.map-placeholder{
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
gap:16px;padding:clamp(28px,4vw,52px);min-height:340px;
background:linear-gradient(135deg,var(--bg-soft),var(--panel));
}
.map-placeholder h4{font-family:var(--serif);font-size:1.3rem;font-weight:500;margin:0}
.map-placeholder p{font-size:.92rem;color:var(--ink-70);max-width:44ch;margin:0}
.map-placeholder small{font-size:.74rem;color:var(--ink-45);max-width:48ch;display:block}
/* ---------- Form status ---------- */
.form-status{
grid-column:1/-1;
font-size:.9rem;padding:14px 18px;border-radius:2px;
border:1px solid var(--line);background:var(--panel);
display:none;
}
.form-status.is-loading{display:block;color:var(--ink-70)}
.form-status.is-success{display:block;color:#9dd6b0;border-color:rgba(157,214,176,.35);background:rgba(50,120,80,.12)}
.form-status.is-error{display:block;color:#ffbcbc;border-color:rgba(255,188,188,.35);background:rgba(140,40,40,.14)}
.form-status a{text-decoration:underline}
/* ---------- Fio condutor (margem direita) + bola luminosa ---------- */
.page-thread{
position:absolute;
right:clamp(14px,2.4vw,38px);
top:0;bottom:0;width:1px;
background:linear-gradient(
to bottom,
transparent 0%,
var(--accent) 6%,
var(--accent) 94%,
transparent 100%
);
opacity:.28;
z-index:50;pointer-events:none;
}
.thread-ball{
position:fixed;
right:clamp(10px,2.4vw,34px);
top:0;width:8px;height:8px;
background:var(--accent-bright);
border-radius:50%;
box-shadow:0 0 14px var(--accent-bright),0 0 28px rgba(73,149,255,.45);
z-index:90;pointer-events:none;
transform:translateY(0);
transition:transform .08s linear;
}
.thread-ball::after{
content:"";position:absolute;inset:-6px;
border:1px solid var(--accent-bright);border-radius:50%;
opacity:.3;
animation:ball-halo 2.6s ease-in-out infinite;
}
@keyframes ball-halo{
0%,100%{transform:scale(1);opacity:.3}
50%{transform:scale(1.7);opacity:0}
}
@media (max-width:760px){
.page-thread,.thread-ball{display:none}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
.hero h1 .ln>span{transform:none}
.hero-lead,.hero-cta{opacity:1}
.thread-ball::after{animation:none}
}
/* ============================================================
Auditoria 2026-05-28 — correções aplicadas
============================================================ */
/* LX-02 — Nav active state. main.js já adiciona .is-active
ao link cujo data-nav corresponde à página corrente; falta
o tratamento visual. */
.nav-links a{position:relative}
.nav-links a.is-active{color:var(--accent-bright)}
.nav-links a.is-active::after{
content:""; position:absolute; left:0; right:0; bottom:-6px;
height:2px; background:var(--accent-bright);
}
.mobile-menu a.is-active .mm-l{color:var(--accent-bright)}
/* A11Y-01 — em secções cream/light a brand-bright #4995FF
falha contraste WCAG AA (2.42 ratio). Forçamos o uso da
variante --accent (#0066CC, ratio 4.51) que cumpre AA. */
.section-light{
--accent-bright:#003088; /* tinta mais profunda sobre cream */
--accent:#003088;
}
.section-light .mk,
.section-light .pullquote .mk{color:var(--accent)}
.section-light .crumb b,
.section-light .eyebrow:not(.is-plain){color:var(--accent)}
/* LX-01 — Recalibrar dimensões do hero-visual.
Antes: home 170-230px (grande), internas 90-130px (pequeno).
Salto de 230 → 130 lia-se como ruptura visual entre páginas.
Novos valores fazem o salto mais subtil: 140-190 e 110-150. */
.hero-visual{
width:clamp(140px,11vw,190px);
bottom:clamp(110px,18vh,200px);
}
.page-hero .hero-visual{
width:clamp(110px,9vw,150px);
bottom:clamp(4px,1vh,18px);
}
/* ============================================================
Auditoria v3 (2026-05-28) — fechamento para 10/10
============================================================ */
/* LX-03 — Hierarquia pullquote vs H2.
Pullquote desce 0.85× e ganha mais peso em italic + côr accent
para se diferenciar claramente do H2 quando aparece lado-a-lado. */
.pullquote{
font-size:clamp(1.45rem, 2.9vw, 2.4rem); /* era ~1.7-3rem; baixou */
line-height:1.28;
font-style:italic;
color:var(--ink-70);
font-weight:400;
}
.pullquote .mk{
color:var(--accent-bright);
font-style:italic;
font-weight:500;
}
/* LX-04 — Diferenciação dos 3 blocos taxonomia em /servicos.
Cards (01) protagonistas, áreas (02) intermédias, chips (03) hairline.
Peso visual claramente descendente. */
/* (01) Cards — borda sólida fina, gap mais generoso, número grande */
.section .card{ } /* mantém estilo standard */
/* (02) Áreas — bloco intermédio.
IMPORTANTE: o gap fica a 2px (hairline original) para não criar bandas
visíveis em fundos cream. Diferenciação faz-se pela tipografia, não pelo
espaçamento. */
.area h4{ font-size:clamp(1.05rem, 1.6vw, 1.32rem) }
.area h4 i{
color:var(--ink-45);
font-style:normal;
font-family:var(--sans);
font-size:.78rem;
letter-spacing:.18em;
margin-right:.6em;
}
.area .tags{ margin-top:6px }
.area .tags span{
font-size:.74rem;
color:var(--ink-45);
letter-spacing:.04em;
}
/* (03) Chips — hairline puro. Inline, pequeno, sem peso. */
.chips{ gap:8px; margin-top:18px }
.chips span{
font-size:.72rem; /* baixou de .82rem */
font-weight:400;
padding:6px 12px;
color:var(--ink-45);
border:1px solid var(--line);
border-radius:2px;
letter-spacing:.04em;
background:transparent;
}
.chips span:hover{
border-color:var(--accent-bright);
color:var(--ink);
}
/* Convicções — variação visual em /sobre.
.value--belief tem composição mais editorial: número grande,
key como assertiva curta com peso, parágrafo de respiração. */
.value--belief{
position:relative;
padding:clamp(28px, 3vw, 44px) 0;
}
.value--belief .vn{
font-family:var(--serif);
font-size:clamp(2.4rem, 4vw, 3.6rem);
font-weight:500;
color:var(--accent);
display:block;
margin-bottom:.2em;
line-height:.9;
}
.value--belief .vk{
display:block;
font-family:var(--serif);
font-size:clamp(1.35rem, 2.2vw, 1.85rem);
font-weight:500;
letter-spacing:-.01em;
color:var(--ink);
line-height:1.18;
margin-bottom:.6em;
max-width:22ch;
}
.section-light .value--belief .vk{ color:#111114 }
.value--belief p{
font-size:clamp(.95rem, 1.2vw, 1.06rem);
line-height:1.6;
max-width:38ch;
}
/* ============================================================
VAGA A · Motion bespoke (2026-06-01)
Camada de craft que distingue o tier €10k. View Transitions,
magnetic buttons, scroll-tied, spring easing, page-load chore.
============================================================ */
/* ============================================================
A1 · View Transitions API (cross-document)
Activa transições nativas entre páginas. Header, brand e
monograma do hero mantêm-se entre rotas; resto do conteúdo
faz crossfade controlado. Fallback elegante onde não suportado.
============================================================ */
@view-transition { navigation: auto }
/* Elementos persistentes — share view-transition-name entre páginas. */
.site-header { view-transition-name: site-header }
.brand { view-transition-name: brand-mark }
.hero-visual { view-transition-name: hero-monograma }
.spine { view-transition-name: spine-rail }
.progress { view-transition-name: progress-line }
/* Container do faz fade controlado. */
main { view-transition-name: page-main }
/* Curvas de saída/entrada para o crossfade do conteúdo. */
::view-transition-old(page-main),
::view-transition-new(page-main){
animation-duration: .42s;
animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
::view-transition-old(page-main){ animation-name: vt-fade-out }
::view-transition-new(page-main){ animation-name: vt-fade-in }
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-8px) } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(12px) } }
/* Elementos persistentes — movimento subtil, não estridente. */
::view-transition-old(brand-mark),
::view-transition-new(brand-mark),
::view-transition-old(hero-monograma),
::view-transition-new(hero-monograma){
animation-duration: .5s;
animation-timing-function: cubic-bezier(.34,1.56,.64,1); /* spring leve */
}
/* Respeitar reduced-motion: VT desligado. */
@media (prefers-reduced-motion: reduce){
::view-transition-old(*),
::view-transition-new(*){ animation-duration: 0s !important }
}
/* ============================================================
A2 · Magnetic buttons
.btn--solid (CTAs primários) magnetiza ao cursor a 80px
de distância. Effect controlado via JS (--mx, --my custom
properties).
============================================================ */
.btn--solid{
--mx: 0px;
--my: 0px;
transform: translate3d(var(--mx), var(--my), 0);
transition: transform .35s cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
.btn--solid:hover{
/* hover intensifica o lift do magnetic */
transition: transform .18s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
.btn--solid{ transform: none; transition: none }
}
/* ============================================================
A3 · Scroll-tied rotation (--scroll-y custom property)
main.js publica em document.documentElement.style.setProperty('--scroll-y', '...').
O monograma absorve essa propriedade como rotação subtil.
============================================================ */
:root{ --scroll-y: 0; --scroll-progress: 0 }
.hero-logomark{
/* Rotação tied ao scroll global, soma à oscilação CSS pré-existente. */
transform: rotate(calc(var(--scroll-progress, 0) * 12deg));
transition: transform .15s linear;
}
@media (prefers-reduced-motion: reduce){
.hero-logomark{ transform: none }
}
/* ============================================================
A4 · Spring physics nos reveals
Substituir ease-out do .reveal por curva spring leve.
Stagger entre elementos irmãos via --rev-delay.
============================================================ */
.reveal{
opacity: 0;
transform: translateY(28px);
transition:
opacity .9s cubic-bezier(.22,.61,.36,1) calc(var(--rev-delay, 0) * 1ms),
transform .9s cubic-bezier(.34,1.42,.64,1) calc(var(--rev-delay, 0) * 1ms);
}
.reveal.is-in{
opacity: 1;
transform: none;
}
/* Stagger automático em grids e listas via :nth-child */
.reveal[data-d="1"] > *:nth-child(1){ --rev-delay: 0 }
.reveal[data-d="1"] > *:nth-child(2){ --rev-delay: 80 }
.reveal[data-d="1"] > *:nth-child(3){ --rev-delay: 160 }
.reveal[data-d="1"] > *:nth-child(4){ --rev-delay: 240 }
.reveal[data-d="1"] > *:nth-child(5){ --rev-delay: 320 }
.reveal[data-d="1"] > *:nth-child(6){ --rev-delay: 400 }
.reveal[data-d="1"] > *:nth-child(7){ --rev-delay: 480 }
.reveal[data-d="1"] > *:nth-child(8){ --rev-delay: 560 }
/* ============================================================
A5 · Page-load choreography no hero
Sequência coreografada de entrada nos elementos do hero.
Cada um tem .h-load-N (N = ordem de revelação).
============================================================ */
.h-load-1, .h-load-2, .h-load-3, .h-load-4, .h-load-5{
opacity: 0;
transform: translateY(18px);
animation: hero-load 1s cubic-bezier(.22,.61,.36,1) forwards;
}
.h-load-1{ animation-delay: .15s }
.h-load-2{ animation-delay: .30s }
.h-load-3{ animation-delay: .50s }
.h-load-4{ animation-delay: .75s }
.h-load-5{ animation-delay: 1.05s }
@keyframes hero-load{
to { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce){
.h-load-1, .h-load-2, .h-load-3, .h-load-4, .h-load-5{
opacity: 1; transform: none; animation: none;
}
}
/* Hover tilt subtil nos cards de serviço (bónus discreto).
3D mas controlado — não estridente. */
.card{
transform-style: preserve-3d;
transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .4s;
}
.card:hover{
transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
.card:hover{ transform: none }
}
/* Fallback de page transition em browsers sem View Transitions API.
Aplica-se ao body antes da navegação; main.js adiciona .is-leaving. */
body{ transition: opacity .22s cubic-bezier(.22,.61,.36,1) }
body.is-leaving{ opacity: 0 }
@media (prefers-reduced-motion: reduce){
body, body.is-leaving{ opacity: 1; transition: none }
}
/* ============================================================
VAGA C · Sistema /notas — listing e artigo individual
============================================================ */
/* Filtro de áreas */
.notes-filter{ margin-bottom: clamp(40px, 5vh, 60px) }
.filter-chips{
display:flex; flex-wrap:wrap; gap:8px;
}
.filter-chips .chip{
font-family: var(--sans);
font-size:.78rem; font-weight:500;
letter-spacing:.06em;
padding: 8px 14px;
background: transparent;
color: var(--ink-45);
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
transition: .35s var(--ease);
}
.filter-chips .chip:hover{
border-color: var(--accent-bright);
color: var(--ink);
}
.filter-chips .chip.is-active{
background: var(--accent-deep);
border-color: var(--accent-deep);
color: #fff;
}
/* Listing grid */
.notes-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(28px, 3vw, 48px);
}
@media (max-width: 880px){ .notes-grid{ grid-template-columns: 1fr } }
.note-card{
position: relative;
transition: .4s var(--ease);
}
.note-link{
display: block;
padding: clamp(28px, 3vw, 40px);
border: 1px solid var(--line);
border-radius: 4px;
transition: .45s var(--ease);
background: rgba(255,255,255,.015);
}
.note-link:hover{
border-color: var(--accent-bright);
background: rgba(73,149,255,.04);
transform: translateY(-3px);
}
.note-meta{
display:flex; align-items:center; gap:.7em;
font-family: var(--sans); font-size:.72rem;
text-transform: uppercase; letter-spacing:.18em;
color: var(--ink-45);
margin-bottom: .9em;
}
.note-meta::before{
content:""; width: 24px; height: 1px; background: var(--accent);
}
.note-area{ color: var(--accent-bright); font-weight: 500 }
.note-title{
font-family: var(--serif);
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
line-height: 1.16; letter-spacing:-.01em;
color: var(--ink);
margin-bottom: .6em;
max-width: 24ch;
}
.note-excerpt{
font-size: .98rem; line-height: 1.62;
color: var(--ink-70);
margin-bottom: 1.4em;
max-width: 50ch;
}
.note-author{
display: block;
font-family: var(--serif); font-style: italic;
font-size: .96rem;
color: var(--ink-45);
margin-bottom: 1em;
}
.note-read{
display: inline-flex; align-items: center; gap: .4em;
font-family: var(--sans); font-size: .76rem; font-weight: 500;
text-transform: uppercase; letter-spacing: .18em;
color: var(--accent-bright);
transition: gap .35s var(--ease);
}
.note-link:hover .note-read{ gap: .8em }
/* Artigo individual */
.note-article{
padding-top: 160px;
padding-bottom: clamp(60px, 8vh, 120px);
}
.note-header{
max-width: 760px;
margin: 0 auto clamp(48px, 6vh, 80px);
}
.note-h1{
font-family: var(--serif);
font-size: clamp(2.4rem, 5.4vw, 4.4rem);
line-height: 1.05; letter-spacing:-.02em;
margin: .3em 0 .35em;
max-width: 18ch;
}
.note-deck{
font-family: var(--serif); font-style: italic;
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
line-height: 1.45;
color: var(--ink-70);
max-width: 50ch;
margin-bottom: 2em;
}
.note-byline{
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px;
padding: 20px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.note-byline-name{
display: block; font-family: var(--serif);
font-size: 1.15rem; font-weight: 500;
color: var(--ink);
}
.note-byline-role{
font-family: var(--sans); font-size: .76rem;
text-transform: uppercase; letter-spacing: .18em;
color: var(--ink-45);
}
.note-byline-meta{
display: flex; flex-direction: column; gap: 4px;
font-family: var(--sans); font-size: .82rem;
color: var(--ink-45);
text-align: right;
}
@media (max-width: 640px){
.note-byline-meta{ text-align: left }
}
.note-body{
max-width: 660px;
margin: 0 auto;
}
.note-body .note-lead{
font-family: var(--serif);
font-size: clamp(1.3rem, 1.9vw, 1.6rem);
line-height: 1.5;
font-style: italic;
color: var(--ink);
margin-bottom: 2em;
}
.note-body h2{
font-family: var(--serif);
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
margin: 2.2em 0 .6em;
color: var(--ink);
}
.note-body p{
font-size: 1.06rem; line-height: 1.72;
color: var(--ink-70);
margin-bottom: 1.2em;
}
.note-body blockquote{
font-family: var(--serif); font-style: italic;
font-size: clamp(1.3rem, 2vw, 1.7rem);
line-height: 1.42;
color: var(--ink);
padding: clamp(28px, 3vw, 44px) 0 clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px);
border-left: 2px solid var(--accent-bright);
margin: 2em 0;
max-width: 36ch;
}
.note-body em{ font-style: italic }
.note-body .muted{
font-size: .88rem;
color: var(--ink-45);
margin-top: 3em;
padding-top: 1.5em;
border-top: 1px solid var(--line);
font-style: italic;
}
.note-footer{
max-width: 760px;
margin: clamp(48px, 6vh, 80px) auto 0;
padding-top: clamp(36px, 4vh, 60px);
border-top: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 24px;
}
.note-tags{ display:flex; flex-wrap:wrap; gap: 8px }
.note-tags .tag{
font-family: var(--sans); font-size:.7rem;
text-transform: uppercase; letter-spacing: .14em;
color: var(--ink-45);
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: 2px;
}
/* ============================================================
VAGA C · Bloco "Factos da casa" (GEO/AEO) em /sobre
============================================================ */
.facts-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(28px, 3vw, 48px) clamp(48px, 5vw, 80px);
}
@media (max-width: 880px){ .facts-grid{ grid-template-columns: 1fr } }
.fact{
border-top: 1px solid var(--line);
padding-top: clamp(18px, 2vw, 28px);
}
.fact dt{
font-family: var(--serif);
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 500;
color: var(--ink);
line-height: 1.22;
margin-bottom: .5em;
max-width: 26ch;
}
.section-light .fact dt{ color: #111114 }
.fact dd{
font-size: 1rem; line-height: 1.62;
color: var(--ink-70);
max-width: 50ch;
}
.section-light .fact dd{ color: rgba(17,17,20,.72) }
/* ============================================================
BÓNUS · OpenType features na Cormorant (faz Cormorant Garamond
parecer custom sem trocar a fonte). Stylistic alternates,
swash characters, contextual alternates, old-style figures.
============================================================ */
.display, h1, h2, .pullquote, .note-h1, .note-deck, .note-body blockquote{
font-feature-settings: "ss01" on, "ss02" on, "calt" on, "kern" on, "liga" on;
}
.display em, h1 em, h2 em, .pullquote em, .note-deck em, .display .ln span em{
font-feature-settings: "swsh" on, "ss01" on, "calt" on;
}
/* Old-style figures em dados — números mais elegantes em corpo */
.stat .n, .partner-meta span, time, .fact dd, .note-meta time{
font-feature-settings: "onum" on, "tnum" on;
}
/* ============================================================
BÓNUS · Grain overlay subtil no fundo dark
Noise texture muito leve, simula textura de papel de máquina.
============================================================ */
body::after{
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
opacity: .035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
.section-light body::after{ opacity: .015 }
@media (prefers-reduced-motion: reduce){
body::after{ display: none } /* Grain pode causar desconforto a alguns */
}
/* ============================================================
BÓNUS · Easter egg signature (mensagem editorial subtil)
Ativada via Konami code ou hover prolongado no monograma do hero.
Visível só quando body tem .easter-on.
============================================================ */
.easter-egg{
position: fixed;
inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(13,13,15,.94);
backdrop-filter: blur(20px);
z-index: 200;
opacity: 0; pointer-events: none;
transition: opacity .6s var(--ease);
}
body.easter-on .easter-egg{ opacity: 1; pointer-events: auto }
.easter-egg-content{
text-align: center;
max-width: 32ch;
padding: 40px;
}
.easter-egg-mark{
font-family: var(--serif);
font-size: clamp(4rem, 10vw, 8rem);
color: var(--accent-bright);
font-weight: 500;
line-height: 1;
margin-bottom: .4em;
}
.easter-egg-text{
font-family: var(--serif);
font-size: clamp(1.4rem, 2.4vw, 2.1rem);
font-style: italic;
color: var(--ink);
line-height: 1.3;
margin-bottom: 1.5em;
}
.easter-egg-close{
font-family: var(--sans); font-size: .76rem;
text-transform: uppercase; letter-spacing: .2em;
color: var(--ink-45);
border: 1px solid var(--line);
padding: 10px 16px;
border-radius: 2px;
cursor: pointer;
transition: .35s var(--ease);
}
.easter-egg-close:hover{ color: var(--ink); border-color: var(--accent-bright) }
/* ============================================================
V3 · Sistema day/night
Dois modos com personalidade própria, não inversão simples.
Default: noite (registo "trabalho concentrado, arquivo").
Dia: cream natural quente (registo "leitura de jornal de manhã").
Controlado por [data-theme="day"] ou [data-theme="night"] no .
============================================================ */
/* Tokens dia — cream quente, ink dark, accent royal blue mais profundo */
:root[data-theme="day"]{
--bg: #f4ede0; /* cream quente, mais saturado que o pause cream */
--bg-soft: #ede5d3; /* tom intermédio para .section-soft em dia */
--panel: #e4dcc2;
--panel-2: #dad1b4;
--line: rgba(17,17,20,.12);
--line-strong: rgba(17,17,20,.22);
--ink: #111114;
--ink-70: rgba(17,17,20,.72);
--ink-45: rgba(17,17,20,.55);
--ink-30: rgba(17,17,20,.30);
/* Em dia, o royal blue mais profundo dá melhor contraste sobre cream */
--accent: #003088;
--accent-deep: #003088;
--accent-bright: #003088;
--accent-dim: rgba(0,48,136,.10);
}
/* Em dia, alguns ajustes específicos */
[data-theme="day"] body::before{
/* O glow ambient em dia é dourado-quente, não royal blue */
background:
radial-gradient(120% 80% at 75% 0%, rgba(220,180,120,.16), transparent 60%),
radial-gradient(80% 60% at 0% 100%, rgba(0,48,136,.05), transparent 70%);
}
[data-theme="day"] body::after{
/* Grain mais discreto em dia */
opacity: .025;
mix-blend-mode: multiply;
}
[data-theme="day"] .site-header.is-scrolled{
background: rgba(244,237,224,.82);
border-bottom-color: var(--line);
}
[data-theme="day"] .btn--solid{
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
/* Botão sólido em dia — no hover enche ink escuro, texto DEVE ser branco.
Cobre também os spans e arrow dentro do botão. */
[data-theme="day"] .btn--solid:hover,
[data-theme="day"] .btn--solid:hover span,
[data-theme="day"] .btn--solid:hover .arrow{ color: #fff !important }
[data-theme="day"] .btn--solid::after{ background: var(--ink) }
/* Cookie banner CTA em dia — mesmo comportamento */
[data-theme="day"] .cookie-banner .btn--solid:hover,
[data-theme="day"] .cookie-banner .btn--solid:hover span{ color: #fff !important }
/* Logo é o brand BLUE — funciona tal-qual em ambos os modos.
Em dia, mantém o azul oficial sobre cream; em noite, sobre dark.
Não precisa de filtros nem swap de imagens. */
[data-theme="day"] .brand-wordmark{ opacity: .95 }
/* Pontos do worldmap canvas — já são dinâmicos via JS, podem precisar de ajuste */
/* Em dia, secções "section-light" tornam-se variação cream MAIS clara,
não cream-sobre-cream (que ficaria invisível). */
[data-theme="day"] .section-light{
background: #fbf7ed;
color: var(--ink);
--bg: #fbf7ed;
--bg-soft: #f4ede0;
/* Garantia: em section-light dentro de dia, accent fica idêntico ao body */
--accent: #003088;
--accent-bright: #003088;
}
/* ============================================================
V3 · Theme toggle button (signature, não ícone genérico)
Glyph tipográfico ":" / "○" que muda conforme o estado.
Posicionado entre o lang-switch e o menu-toggle.
============================================================ */
.theme-toggle{
display: inline-flex;
align-items: center; justify-content: center;
width: 38px; height: 38px;
margin-right: 12px;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-family: var(--serif);
font-size: 1.05rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
position: relative;
transition: border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
overflow: hidden;
}
.theme-toggle:hover{
border-color: var(--accent-bright);
transform: scale(1.05);
}
.theme-toggle .glyph{
position: relative;
display: inline-block;
line-height: 1;
transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .35s var(--ease);
}
/* SVG sol/lua refinados — universais e on-brand.
Mostra a CONTRAPARTE (em noite mostra-se o sol = "ir para dia").
Convenção universal: o ícone sugere a acção, não o estado actual. */
.theme-toggle .glyph{
display: inline-block;
width: 18px; height: 18px;
position: relative;
}
.theme-toggle .glyph::before,
.theme-toggle .glyph::after{
content: "";
position: absolute; inset: 0;
background: var(--accent-bright);
/* fallback SVG (sol) — evita quadrado azul se por qualquer motivo
o data-theme não estiver definido no antes do CSS aplicar */
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
transition: opacity .4s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* esconde ::after por defeito para não ficarem dois ícones sobrepostos */
.theme-toggle .glyph::after{ opacity: 0 }
/* Em NOITE, mostra-se o ícone SOL — convidando à ida para dia */
:root[data-theme="night"] .theme-toggle .glyph::before{
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
opacity: 1; transform: rotate(0);
}
:root[data-theme="night"] .theme-toggle .glyph::after{ opacity: 0 }
/* Em DIA, mostra-se o ícone LUA — convidando à ida para noite */
:root[data-theme="day"] .theme-toggle .glyph::after{
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
background: var(--accent);
opacity: 1; transform: rotate(0);
}
:root[data-theme="day"] .theme-toggle .glyph::before{ opacity: 0; transform: rotate(-90deg) }
.theme-toggle:focus-visible{
outline: 2px solid var(--accent-bright);
outline-offset: 4px;
}
/* Variante mobile (menu-toggle space) */
@media (max-width: 980px){
.theme-toggle{ margin-right: 6px; width: 34px; height: 34px }
}
/* ============================================================
V3 · Transição global entre temas (View Transitions API)
Quando suportado, um crossfade circular suave a partir do toggle.
Em fallback, body faz fade-color via transition em --bg/--ink.
============================================================ */
html{ color-scheme: dark }
html[data-theme="day"]{ color-scheme: light }
body, .section, .section-light, .section-soft, .hero, .page-hero, .cta-band,
.btn, .chip, .note-link, .note-card, .filter-chips .chip{
transition:
background-color .55s cubic-bezier(.22,.61,.36,1),
color .55s cubic-bezier(.22,.61,.36,1),
border-color .55s cubic-bezier(.22,.61,.36,1);
}
/* View Transitions: nomear root para uma transição global suave */
::view-transition-old(root),
::view-transition-new(root){
animation-duration: .6s;
animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
/* Respeitar reduced-motion: transições instantâneas */
@media (prefers-reduced-motion: reduce){
body, .section, .hero, .page-hero{ transition: none }
}
/* ============================================================
V3 fix · Modo dia mais contrastado (correção pós-screenshot)
No print, chips, link-line e detalhes ficavam esbatidos sobre cream.
Reforça as linhas e detalhes que dependiam do tema escuro.
============================================================ */
[data-theme="day"]{
/* Aumentar opacidade das linhas em dia para ficarem mais legíveis sobre cream */
--line: rgba(17,17,20,.22); /* era .12 */
--line-strong: rgba(17,17,20,.35); /* era .22 */
}
[data-theme="day"] .chips span{
border-color: var(--line);
color: var(--ink-70);
}
[data-theme="day"] .chips span:hover{
border-color: var(--accent);
color: var(--ink);
background: rgba(0,48,136,.06);
}
[data-theme="day"] .link-line{ color: var(--ink) }
[data-theme="day"] .link-line::after{ background: var(--line-strong) }
[data-theme="day"] .link-line::before{ background: var(--accent) }
/* Eyebrow tracinho em dia — usa accent profundo */
[data-theme="day"] .eyebrow::before,
[data-theme="day"] .index-tag{ color: var(--accent) }
/* Worldmap-wrap border em dia */
[data-theme="day"] .worldmap-wrap{ border-color: var(--line-strong) }
/* Stat numbers em dia */
[data-theme="day"] .stat .n{ color: var(--ink) }
[data-theme="day"] .stat .n em{ color: var(--accent) }
/* Garantir que o monograma decorativo (.mark-tr/.mark-bl) é visível em dia */
[data-theme="day"] .mark-tr > .shell::after,
[data-theme="day"] .mark-bl > .shell::after{
opacity: .14;
}
/* ============================================================
V3 fix · Botão outline no hero em modo dia
Em noite usa color:#fff sobre dark; em dia precisa de ink dark.
============================================================ */
[data-theme="day"] .hero .btn:not(.btn--solid){
color: var(--ink);
border-color: var(--line-strong);
}
[data-theme="day"] .hero .btn:not(.btn--solid):hover{
color: #fff;
border-color: var(--accent);
}
/* ============================================================
V3 fora-da-caixa · Typographic rupture moment
Uma palavra única ("Lemos.") em Cormorant Italic grande,
rotada -90°, fixa na margem esquerda, fade in/out por scroll.
Aparece uma vez em todo o site. Quem vê, recorda.
============================================================ */
.rupture{
position: relative;
height: 0;
z-index: 1;
pointer-events: none;
}
.rupture-word{
position: absolute;
left: clamp(20px, 4vw, 64px);
top: clamp(-80px, -10vh, -120px);
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: clamp(5rem, 12vw, 11rem);
line-height: .8;
letter-spacing: -.04em;
color: var(--accent-bright);
opacity: .14;
transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;
white-space: nowrap;
user-select: none;
/* Subtilmente revela com o scroll usando --scroll-progress já publicado */
transition: opacity .8s var(--ease);
}
/* Em dia, o accent é mais profundo — opacity mais baixa para não dominar */
[data-theme="day"] .rupture-word{
opacity: .10;
color: var(--accent);
}
@media (max-width: 880px){
.rupture-word{ font-size: clamp(4rem, 16vw, 7rem); left: 12px }
}
@media (prefers-reduced-motion: reduce){
.rupture-word{ opacity: .08 }
}
/* ============================================================
V3 fora-da-caixa · 8 SVG marks bespoke por área de prática
Monoline 1.4px, accent color, transição subtil no hover do .area.
Sistema abstracto coerente — não literal, editorial.
============================================================ */
.area-mark{
width: clamp(20px, 1.6vw, 24px);
height: clamp(20px, 1.6vw, 24px);
color: var(--accent-bright);
flex: none;
transition: transform .5s var(--ease), color .35s var(--ease);
margin-right: 8px;
vertical-align: -3px;
}
[data-theme="day"] .area-mark{ color: var(--accent) }
.section-light .area-mark{ color: var(--accent) }
.area:hover .area-mark{
transform: rotate(-8deg) scale(1.08);
}
/* Adaptação do h4 das áreas para acomodar o SVG */
.area h4{ display: flex; align-items: center; gap: .35em; flex-wrap: wrap }
.area h4 i{ flex: none }
/* ============================================================
V3 fora-da-caixa · Asymmetric grid break section
Layout que rompe a grelha 1320px. Texto à direita (35%),
palavra-âncora gigante à esquerda sangra para fora da shell.
Aparece uma vez na home. Editorial moment.
============================================================ */
.manifest-break{
position: relative;
padding: clamp(80px, 14vh, 180px) 0;
overflow: hidden;
z-index: 2;
}
.manifest-break::before{
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 70% at 20% 50%, rgba(73,149,255,.08), transparent 70%);
pointer-events: none;
}
[data-theme="day"] .manifest-break::before{
background:
radial-gradient(60% 70% at 20% 50%, rgba(0,48,136,.06), transparent 70%);
}
.mb-anchor{
position: absolute;
right: -3vw; /* sangra para fora da grelha à DIREITA */
left: auto;
top: 50%;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
}
.mb-word{
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: clamp(8rem, 22vw, 22rem);
line-height: .82;
letter-spacing: -.05em;
color: var(--accent-bright);
opacity: .10;
white-space: nowrap;
display: block;
}
[data-theme="day"] .mb-word{ color: var(--accent); opacity: .08 }
/* O texto agora vive dentro do .shell standard (1320px max), alinhado à
esquerda. Isto faz com que comece exatamente no mesmo x das secções
QUEM SOMOS e SÓCIOS — coesão de grelha, com assimetria preservada na
palavra gigante que sangra à direita. */
.mb-text{
position: relative;
z-index: 1;
max-width: 780px;
text-align: left;
}
.mb-text .eyebrow{ justify-content: flex-start; margin-bottom: 1.2em }
.mb-text .eyebrow::before{ display: none } /* eyebrow plain por design */
.mb-prose{
font-family: var(--serif);
font-size: clamp(1.35rem, 2.2vw, 1.95rem);
line-height: 1.32;
letter-spacing: -.01em;
color: var(--ink);
margin-bottom: 1.2em;
/* Cada frase deve caber numa só linha. text-wrap:balance evita orfãos. */
text-wrap: balance;
}
.mb-prose em{
font-style: italic;
color: var(--accent-bright);
font-weight: 500;
}
[data-theme="day"] .mb-prose em{ color: var(--accent) }
.mb-prose--minor{
font-family: var(--sans);
font-size: clamp(.95rem, 1.2vw, 1.08rem);
line-height: 1.6;
color: var(--ink-45);
font-style: normal;
}
@media (max-width: 880px){
.mb-anchor{ right: -10vw; left: auto; top: 18% }
.mb-word{ font-size: 22vw }
.mb-text{ text-align: left }
.mb-text .eyebrow{ justify-content: flex-start }
}
@media (prefers-reduced-motion: reduce){
.mb-word{ opacity: .06 }
}
/* ============================================================
V3 · 5ª convicção — climax editorial
Quebra o grid das 4 primeiras, ocupa largura total, com mais
peso tipográfico. É a posição-chave da casa.
============================================================ */
.value--climax{
margin-top: clamp(48px, 6vh, 80px);
padding-top: clamp(48px, 6vh, 80px);
border-top: 1px solid var(--line);
display: block;
position: relative;
}
.value--climax .vn{
font-size: clamp(3rem, 5vw, 4.6rem);
color: var(--accent);
}
.value--climax .vk{
font-size: clamp(1.8rem, 3.4vw, 2.8rem);
max-width: 20ch;
line-height: 1.1;
margin-bottom: .7em;
}
.value--climax p{
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
line-height: 1.62;
max-width: 56ch;
}
/* Glow editorial subtil — anuncia a climax */
.value--climax::before{
content: "";
position: absolute;
top: 0; left: 0;
width: clamp(60px, 6vw, 96px);
height: 1px;
background: var(--accent);
}
[data-theme="day"] .value--climax::before{ background: var(--accent) }
/* ============================================================
V3 · Filosofia "Recusamos a resposta óbvia" — destaque editorial subtil
Parágrafo dentro do QUEM SOMOS, primeira frase em ink full (negrito do
) seguida da explicação em ink-70. Linha vertical accent à esquerda
para o demarcar do parágrafo anterior sem o gritar.
============================================================ */
.about-philosophy{
position: relative;
padding-left: clamp(16px, 1.6vw, 24px);
border-left: 2px solid var(--accent-bright);
margin-top: clamp(20px, 2vh, 28px) !important;
font-size: clamp(1rem, 1.2vw, 1.08rem);
line-height: 1.65;
max-width: 50ch;
}
.about-philosophy b{
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 1.08em;
color: var(--accent-bright);
letter-spacing: -.005em;
}
[data-theme="day"] .about-philosophy{ border-left-color: var(--accent) }
[data-theme="day"] .about-philosophy b{ color: var(--accent) }
.section-light .about-philosophy{ border-left-color: var(--accent) }
.section-light .about-philosophy b{ color: var(--accent) }
/* ---------- Related notes (SEO internal linking + dwell time) ---------- */
.related-notes{
max-width:900px;
margin:clamp(50px,7vw,90px) auto 0;
padding:clamp(30px,4vw,50px) 0 0;
border-top:1px solid var(--line);
}
.related-h{
font-family:var(--serif);
font-size:clamp(1.5rem,3vw,2.2rem);
font-weight:500;
margin-bottom:clamp(24px,3vw,36px);
letter-spacing:-.01em;
}
.related-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(20px,3vw,32px);
}
.related-card{
display:block;
padding:clamp(24px,3vw,32px);
border:1px solid var(--line-strong);
transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease);
position:relative;
}
.related-card:hover{
border-color:var(--accent-bright);
background:rgba(73,149,255,.03);
transform:translateY(-2px);
}
.related-area{
display:block;
font-family:var(--sans);
font-size:.68rem;
font-weight:500;
text-transform:uppercase;
letter-spacing:.24em;
color:var(--accent-bright);
margin-bottom:14px;
}
.related-title{
font-family:var(--serif);
font-size:clamp(1.15rem,1.8vw,1.4rem);
font-weight:500;
line-height:1.15;
color:var(--ink);
margin-bottom:20px;
text-wrap:balance;
}
.related-read{
font-family:var(--sans);
font-size:.75rem;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-70);
transition:color .3s var(--ease);
}
.related-card:hover .related-read{color:var(--accent-bright)}
/* Day mode adjustments */
[data-theme="day"] .related-card{border-color:rgba(0,0,0,.14)}
[data-theme="day"] .related-card:hover{background:rgba(0,102,204,.04)}
.related-notes-wrap{padding:clamp(50px,7vw,90px) 0 clamp(20px,3vw,40px)}
.related-notes-wrap .related-notes{margin:0 auto;border-top:none;padding:0}
/* ---------- Note article: anchor markers, TOC, share ---------- */
/* # marker que aparece no hover ao lado do H2 */
.note-body h2{position:relative}
.note-body .h-anchor{
position:absolute;
left:-1.2em;
top:.1em;
color:var(--accent-bright);
opacity:0;
font-family:var(--sans);
font-size:.7em;
font-weight:400;
transition:opacity .3s var(--ease);
text-decoration:none;
}
.note-body h2:hover .h-anchor,
.note-body .h-anchor:focus{opacity:.8}
@media (max-width: 700px){
.note-body .h-anchor{position:static;display:inline-block;margin-right:.3em;opacity:.5}
}
/* Table of contents */
.note-toc{
margin:clamp(28px,4vw,44px) 0 clamp(36px,5vw,60px);
padding:clamp(20px,2.5vw,32px);
border:1px solid var(--line);
background:rgba(255,255,255,.02);
}
.note-toc-eyebrow{
display:block;
font-family:var(--sans);
font-size:.68rem;
font-weight:500;
text-transform:uppercase;
letter-spacing:.24em;
color:var(--ink-45);
margin-bottom:14px;
}
.note-toc ol{
list-style:none;
counter-reset:toc;
padding:0;
margin:0;
columns:1;
}
@media (min-width: 720px){
.note-toc ol{columns:2;column-gap:32px}
}
.note-toc li{
counter-increment:toc;
padding:6px 0 6px 32px;
position:relative;
break-inside:avoid;
}
.note-toc li::before{
content:counter(toc, decimal-leading-zero);
position:absolute;
left:0;
top:6px;
font-family:var(--sans);
font-size:.68rem;
font-weight:500;
letter-spacing:.14em;
color:var(--accent-bright);
}
.note-toc a{
font-family:var(--serif);
font-size:1.05rem;
color:var(--ink-70);
text-decoration:none;
transition:color .3s var(--ease);
line-height:1.35;
display:block;
}
.note-toc a:hover,.note-toc a:focus{color:var(--ink)}
/* Day mode adjust */
[data-theme="day"] .note-toc{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.12)}
/* Share block — brand-consistent tipográfico */
.share{
margin-top:clamp(40px,5vw,60px);
padding-top:clamp(28px,3.5vw,40px);
border-top:1px solid var(--line);
}
.share-label{
display:block;
font-family:var(--sans);
font-size:.68rem;
font-weight:500;
text-transform:uppercase;
letter-spacing:.24em;
color:var(--ink-45);
margin-bottom:16px;
}
.share-links{
display:flex;
flex-wrap:wrap;
gap:clamp(12px,2vw,24px);
}
.share-link{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 16px;
font-family:var(--sans);
font-size:.78rem;
font-weight:500;
letter-spacing:.06em;
color:var(--ink-70);
border:1px solid var(--line-strong);
background:transparent;
cursor:pointer;
transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
text-decoration:none;
}
.share-link:hover,
.share-link:focus{
color:var(--ink);
border-color:var(--accent-bright);
background:rgba(73,149,255,.04);
}
.share-link svg{opacity:.75;transition:opacity .3s var(--ease)}
.share-link:hover svg{opacity:1}
.share-link.is-copied{color:var(--accent-bright);border-color:var(--accent-bright)}
[data-theme="day"] .share-link{border-color:rgba(0,0,0,.15)}
[data-theme="day"] .share-link:hover{background:rgba(0,102,204,.05)}