/* Site da Margella Furtado. Visual refeito do zero em 28/10/2026.
   Princípios: fundo liso em papel claro, texto café, uma única cor de destaque (terracota escuro) e uma faixa escura
   para os momentos de fechamento. Gloock nos títulos, Spectral no texto, Schibsted Grotesk em rótulos, botões e legendas.
   Cada seção segue o mesmo esqueleto: rótulo, título, texto e conteúdo; nada de caixas soltas nem elementos inclinados. */

:root {
  --fundo:#F5EEE6; --superficie:#FFFCF8; --quadro:#EDE4D9;
  --tinta:#2B1C16; --texto:#43352C; --suave:#5A483C;
  --acento:#7F361D; --acento-forte:#6A2C16;
  --linha:rgba(43,28,22,.14); --linha-forte:rgba(43,28,22,.28);
  --escuro:#2B211C; --sobre-escuro:#F5EEE6; --sobre-escuro-suave:#DCCBBB; --acento-escuro:#EDB08E;
  --heroi:#35302C;
  --sombra:0 1px 2px rgba(43,28,22,.06), 0 18px 40px -28px rgba(43,28,22,.45);
  --g:Gloock, Georgia, serif; --s:Spectral, Georgia, serif; --gr:'Schibsted Grotesk', system-ui, sans-serif;
  --largura:1180px; --lado:clamp(16px, 4.5vw, 48px); --respiro:clamp(64px, 9vw, 128px);
  color-scheme:light;
}
/* Abajur: luz quente e baixa num quarto escuro. Só quando a pessoa escolhe (o site sempre abre no claro). */
:root[data-tema="noite"] {
  --fundo:#1E1712; --superficie:#29201A; --quadro:#30261F;
  --tinta:#F3E6D6; --texto:#E4D4C1; --suave:#CDBBA6;
  --acento:#EDAA82; --acento-forte:#F5BE9C;
  --linha:rgba(243,230,214,.14); --linha-forte:rgba(243,230,214,.3);
  --escuro:#130E0B; --sobre-escuro:#F3E6D6; --sobre-escuro-suave:#D2C0AC; --acento-escuro:#EDAA82;
  --heroi:#15100D;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -26px rgba(0,0,0,.8);
  color-scheme:dark;
}
.trocando, .trocando * { transition:background-color .6s, color .6s, border-color .6s !important; }

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
body { background:var(--fundo); color:var(--texto); font-family:var(--s); font-weight:300; font-size:clamp(17px, 1.15vw, 18.5px); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection { background:var(--acento); color:var(--superficie); }
:focus-visible { outline:2px solid var(--acento); outline-offset:3px; border-radius:2px; }
h1, h2, h3 { color:var(--tinta); font-weight:400; text-wrap:balance; }
p { text-wrap:pretty; }
b, strong { font-weight:500; color:var(--tinta); }
.g { font-family:var(--g); font-weight:400; letter-spacing:-.005em; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pular { position:fixed; left:16px; top:-80px; z-index:100; background:var(--tinta); color:var(--fundo); padding:10px 16px; font-family:var(--gr); font-size:15px; }
.pular:focus { top:16px; }
.ico { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* largura do conteúdo e ritmo vertical */
.w { width:min(100% - 2 * var(--lado), var(--largura)); margin-inline:auto; }
.sec { margin-top:var(--respiro); }
.kicker { font-family:var(--gr); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--acento); line-height:1.4; }
.lead { font-size:clamp(19px, 1.5vw, 22px); line-height:1.55; color:var(--texto); max-width:38em; }
.nota { font-family:var(--gr); font-size:14px; color:var(--suave); margin-top:14px; }
.lk { font-family:var(--gr); font-size:15.5px; font-weight:500; color:var(--acento); border-bottom:1px solid currentColor; padding-bottom:1px; transition:color .2s; }
.lk:hover { color:var(--acento-forte); }

/* cabeçalho de cada seção: rótulo, título e uma frase opcional */
.secao-cab { margin-bottom:clamp(28px, 3.4vw, 44px); max-width:46em; }
.secao-cab h2 { font-size:clamp(30px, 3.3vw, 44px); line-height:1.12; }
.secao-cab .kicker + h2 { margin-top:10px; }
.secao-cab p:not(.kicker) { margin-top:12px; color:var(--suave); font-size:clamp(17px, 1.2vw, 19px); }
.secao-cab.linha { max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }

/* botões */
.bt { display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:12px 24px; border-radius:999px; background:var(--tinta); color:var(--fundo); font-family:var(--gr); font-size:16px; font-weight:500; transition:background .25s, color .25s; }
.bt:hover { background:var(--acento); color:var(--superficie); }
:root[data-tema="noite"] .bt:hover { color:var(--fundo); }
.bt.claro { background:var(--sobre-escuro); color:var(--escuro); }
.bt.claro:hover { background:#fff; color:var(--escuro); }
.bt.contorno { background:none; color:var(--sobre-escuro); box-shadow:inset 0 0 0 1px rgba(245,238,230,.55); }
.bt.contorno:hover { box-shadow:inset 0 0 0 1px var(--sobre-escuro); background:rgba(245,238,230,.08); }

/* redes: ícones redondos */
.redes { display:flex; flex-wrap:wrap; gap:10px; }
.rede { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--linha-forte); color:var(--tinta); transition:background .25s, color .25s, box-shadow .25s; }
.rede:hover { background:var(--tinta); color:var(--fundo); box-shadow:none; }
.rede .ico { width:21px; height:21px; }

/* traço à mão sob a expressão-chave do título (um por página) */
.marcado { position:relative; white-space:nowrap; }
.marcado .rab { position:absolute; left:-2%; bottom:-.16em; width:104%; height:.3em; fill:none; stroke:var(--acento); stroke-width:2.4; stroke-linecap:round; vector-effect:non-scaling-stroke; }

/* ── cabeçalho do site ── */
.topo { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--linha); }
.topo-in { width:min(100% - 2 * var(--lado), var(--largura)); margin-inline:auto; min-height:72px; display:flex; align-items:center; gap:28px; }
.marca { font-family:var(--g); font-size:23px; color:var(--tinta); white-space:nowrap; }
.menu { display:flex; gap:26px; margin-left:auto; }
.menu a { font-family:var(--gr); font-size:15.5px; font-weight:500; color:var(--texto); padding:8px 0; border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s; }
.menu a:hover { color:var(--tinta); }
.menu a[aria-current="page"] { color:var(--tinta); border-color:var(--acento); }
.chaves { display:flex; align-items:center; gap:4px; }
.idioma, .tema { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 10px; font-family:var(--gr); font-size:14px; font-weight:500; color:var(--suave); border-radius:999px; transition:background .2s, color .2s; }
.idioma:hover, .tema:hover { background:var(--quadro); color:var(--tinta); }
.idioma b { font-weight:500; }
.idioma b.on { color:var(--tinta); font-weight:600; }
.tema[aria-pressed="true"] { color:var(--acento); }
.abre-menu { display:none; width:44px; height:44px; position:relative; flex-shrink:0; }
.abre-menu span:not(.sr) { position:absolute; left:11px; right:11px; height:1.6px; background:var(--tinta); transition:transform .3s, top .3s; }
.abre-menu span:nth-child(1) { top:17px; } .abre-menu span:nth-child(2) { top:26px; }
.abre-menu[aria-expanded="true"] span:nth-child(1) { top:21.5px; transform:rotate(45deg); }
.abre-menu[aria-expanded="true"] span:nth-child(2) { top:21.5px; transform:rotate(-45deg); }
.gaveta { position:fixed; inset:72px 0 0; z-index:39; background:var(--fundo); padding:28px var(--lado) 40px; display:flex; flex-direction:column; gap:32px; overflow-y:auto; }
.gaveta[hidden] { display:none; }
.gaveta nav { display:flex; flex-direction:column; }
.gaveta nav a { font-family:var(--g); font-size:32px; color:var(--tinta); padding:12px 0; border-bottom:1px solid var(--linha); }
.gaveta nav a[aria-current="page"] { color:var(--acento); }
body.menu-aberto { overflow:hidden; }

/* no início, o cabeçalho fica sobre a foto */
.p-heroi .topo { position:absolute; left:0; right:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-color:rgba(245,238,230,.16); }
.p-heroi .topo .marca, .p-heroi .topo .menu a, .p-heroi .topo .idioma, .p-heroi .topo .idioma b.on, .p-heroi .topo .tema { color:#F5EEE6; }
.p-heroi .topo .menu a[aria-current="page"] { border-color:var(--acento-escuro); }
.p-heroi .topo .idioma:hover, .p-heroi .topo .tema:hover { background:rgba(245,238,230,.12); }
.p-heroi .topo .abre-menu span:not(.sr) { background:#F5EEE6; }
.p-heroi.menu-aberto .topo { position:fixed; background:var(--fundo); }
.p-heroi.menu-aberto .topo .marca, .p-heroi.menu-aberto .topo .idioma, .p-heroi.menu-aberto .topo .tema { color:var(--tinta); }
.p-heroi.menu-aberto .topo .abre-menu span:not(.sr) { background:var(--tinta); }

/* ── início: abertura com o retrato ── */
.heroi { position:relative; min-height:min(100svh, 900px); background:var(--heroi); color:var(--sobre-escuro); display:flex; align-items:center; overflow:hidden; }
.heroi-foto { position:absolute; inset:0 0 0 auto; width:62%; margin:0; }
.heroi-foto img { width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.heroi-foto::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--heroi) 0%, rgba(53,48,44,0) 42%); }
:root[data-tema="noite"] .heroi-foto img { filter:brightness(.82) sepia(.12); }
:root[data-tema="noite"] .heroi-foto::after { background:linear-gradient(90deg, var(--heroi) 0%, rgba(21,16,13,0) 45%); }
.heroi-txt { position:relative; width:min(100% - 2 * var(--lado), var(--largura)); margin-inline:auto; padding:120px 0 72px; }
.heroi-txt > * { max-width:520px; }
.heroi .kicker { color:var(--acento-escuro); }
.heroi h1 { color:#FBF5EE; font-size:clamp(48px, 6.4vw, 92px); line-height:1; margin-top:18px; }
.heroi-sub { margin-top:24px; font-size:clamp(18px, 1.4vw, 21px); line-height:1.6; color:var(--sobre-escuro-suave); }
.acoes { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.heroi .redes { margin-top:30px; }
.heroi .rede, .faixa-escura .rede { color:var(--sobre-escuro); box-shadow:inset 0 0 0 1px rgba(245,238,230,.35); }
.heroi .rede:hover, .faixa-escura .rede:hover { background:var(--sobre-escuro); color:var(--escuro); }

/* números */
.numeros { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); border-top:1px solid var(--linha); }
.numeros > div { padding:26px 24px 4px 0; }
.numeros > div + div { padding-left:24px; border-left:1px solid var(--linha); }
.numeros dt { font-size:clamp(44px, 4.6vw, 64px); line-height:1; color:var(--tinta); }
.numeros dd { margin-top:10px; font-family:var(--gr); font-size:15px; line-height:1.45; color:var(--suave); max-width:16em; }
.numeros-home { margin-top:clamp(40px, 6vw, 72px); }

/* cartões de trabalho */
.cartoes { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.2vw, 28px); }
.destaques { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(18px, 2.2vw, 28px); }
.destaques .grande { grid-row:span 2; }
.cartao { display:flex; flex-direction:column; background:var(--superficie); border-radius:6px; overflow:hidden; box-shadow:var(--sombra); transition:transform .35s, box-shadow .35s; }
.cartao:hover { transform:translateY(-3px); box-shadow:0 1px 2px rgba(43,28,22,.08), 0 26px 50px -30px rgba(43,28,22,.6); }
.cartao-img { aspect-ratio:4 / 3; overflow:hidden; background:var(--quadro); }
.cartao-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.cartao:hover .cartao-img img { transform:scale(1.03); }
.cartao-img.contem { background:#fff; }
.cartao-img.contem img { object-fit:contain; padding:6%; }
.destaques .grande .cartao-img { aspect-ratio:auto; flex:1; min-height:320px; }
.cartao-texto { display:flex; flex-direction:column; justify-content:center; padding:28px; background:var(--quadro); }
.cartao-texto .aspas { font-size:64px; line-height:.6; color:var(--acento); }
.cartao-texto p { font-size:clamp(20px, 1.7vw, 24px); line-height:1.25; color:var(--tinta); margin-top:12px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.cartao-txt { padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:none; }
.cartao-meta { font-family:var(--gr); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--acento); }
.cartao h3 { font-size:clamp(21px, 1.6vw, 24px); line-height:1.2; }
.destaques .grande h3 { font-size:clamp(24px, 2.2vw, 32px); }
.cartao-txt > p:not(.cartao-meta) { font-size:16.5px; line-height:1.55; color:var(--suave); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cartao-mais { margin-top:6px; font-family:var(--gr); font-size:15px; font-weight:500; color:var(--tinta); }
.cartao:hover .cartao-mais { color:var(--acento); }

/* áreas de atuação (início) */
.areas { list-style:none; border-top:1px solid var(--linha); }
.areas a { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr) auto; gap:24px; align-items:baseline; padding:24px 0; border-bottom:1px solid var(--linha); transition:padding .3s; }
.areas b { font-size:clamp(22px, 2vw, 28px); color:var(--tinta); line-height:1.2; }
.areas span { color:var(--suave); }
.areas em { font-style:normal; font-family:var(--gr); font-size:15px; font-weight:500; color:var(--acento); white-space:nowrap; }
.areas a:hover { padding-left:12px; }
.areas a:hover b { color:var(--acento); }

/* artigo autoral em destaque, com foto */
.artigo-destaque { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:center; }
.artigo-destaque figure { border-radius:6px; overflow:hidden; aspect-ratio:4 / 3; margin:0; }
.artigo-destaque img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.artigo-destaque h2 { font-size:clamp(30px, 3vw, 42px); line-height:1.14; margin:12px 0 18px; }
.artigo-abre { color:var(--suave); margin-bottom:28px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

/* clientes */
.clientes { border-top:1px solid var(--linha); padding-top:28px; }
.clientes ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px 0; margin-top:18px; }
.clientes li { font-size:clamp(21px, 2vw, 28px); color:var(--tinta); }
.clientes li:not(:last-child)::after { content:"·"; margin:0 .55em; color:var(--acento); }

/* depoimento */
.depoimento { max-width:900px; text-align:center; }
.depoimento blockquote p { font-size:clamp(24px, 2.6vw, 36px); line-height:1.3; color:var(--tinta); }
.depoimento-quem { margin-top:22px; font-family:var(--gr); font-size:15.5px; color:var(--suave); }

/* faixa escura de fechamento */
.faixa-escura { margin-top:var(--respiro); background:var(--escuro); color:var(--sobre-escuro-suave); padding:clamp(56px, 8vw, 104px) 0; }
.faixa-escura h2 { color:var(--sobre-escuro); font-size:clamp(32px, 3.8vw, 52px); line-height:1.1; }
.faixa-escura .marcado .rab { stroke:var(--acento-escuro); }
.convite { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end; }
.convite p { margin-top:16px; max-width:30em; font-size:clamp(17px, 1.3vw, 19px); }
.convite-acoes { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }

/* ── páginas internas ── */
.cab { padding-top:clamp(56px, 8vw, 104px); }
.cab h1 { font-size:clamp(42px, 5.4vw, 76px); line-height:1.04; margin:14px 0 22px; max-width:16em; }
.filtros { display:flex; gap:8px; margin-top:34px; overflow-x:auto; scrollbar-width:none; padding:2px 24px 4px 2px; -webkit-mask-image:linear-gradient(90deg, #000 92%, transparent); mask-image:linear-gradient(90deg, #000 92%, transparent); }
.filtros::-webkit-scrollbar { display:none; }
.filtros button { flex:none; min-height:44px; padding:0 18px; border-radius:999px; font-family:var(--gr); font-size:15px; font-weight:500; color:var(--texto); box-shadow:inset 0 0 0 1px var(--linha-forte); white-space:nowrap; transition:background .2s, color .2s; }
.filtros button:hover { color:var(--tinta); box-shadow:inset 0 0 0 1px var(--tinta); }
.filtros button[aria-pressed="true"] { background:var(--tinta); color:var(--fundo); box-shadow:none; }
.area[hidden] { display:none; }
.em-breve { border-top:1px solid var(--linha); padding-top:24px; color:var(--suave); }
.em-breve p:not(.kicker) { margin-top:8px; max-width:40em; }

/* página de um trabalho */
.peca-abertura { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(28px, 5vw, 72px); align-items:start; padding-top:clamp(40px, 6vw, 80px); }
.peca-abertura.sem-capa { grid-template-columns:minmax(0, 1fr); max-width:900px; }
.volta { display:inline-flex; gap:8px; align-items:center; min-height:44px; font-family:var(--gr); font-size:15px; font-weight:500; color:var(--acento); }
.volta:hover { color:var(--acento-forte); }
.peca-abertura h1 { font-size:clamp(36px, 4.2vw, 58px); line-height:1.08; margin:10px 0 20px; }
.ficha { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 28px; margin-top:30px; padding-top:24px; border-top:1px solid var(--linha); }
.ficha dt { font-family:var(--gr); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--suave); }
.ficha dd { margin-top:4px; font-size:16.5px; line-height:1.45; color:var(--tinta); }
.originais { margin-top:28px; padding:20px 22px; background:var(--superficie); border-radius:6px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:4px; }
.originais .kicker { margin-bottom:6px; }
.original { display:flex; align-items:center; gap:10px; min-height:44px; font-family:var(--gr); font-size:15.5px; font-weight:500; color:var(--tinta); transition:color .2s; width:fit-content; max-width:100%; }
.original > span { border-bottom:1px solid var(--linha-forte); overflow-wrap:anywhere; }
.original:hover { color:var(--acento); }
.original:hover > span { border-color:currentColor; }
.original .seta-fora { width:15px; height:15px; color:var(--suave); }
.peca-capa { border-radius:6px; overflow:hidden; background:var(--quadro); aspect-ratio:4 / 5; box-shadow:var(--sombra); margin:0; }
.peca-capa img { width:100%; height:100%; object-fit:cover; }
.peca-capa.contem { aspect-ratio:4 / 3; background:#fff; }
.peca-capa.contem img { object-fit:contain; padding:5%; }
.corpo { max-width:40em; }
.corpo p + p { margin-top:1.1em; }
.duas-colunas { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(24px, 5vw, 72px); }
.duas-colunas .secao-cab { margin-bottom:0; }

/* galerias: uma imagem por vez, numa moldura de cor única; legenda e link do original embaixo */
.galeria .secao-cab h2 { font-size:clamp(26px, 2.6vw, 36px); }
.quadro { position:relative; display:flex; align-items:center; justify-content:center; background:var(--quadro); border-radius:6px; padding:clamp(14px, 2.6vw, 36px); height:clamp(380px, 64vh, 660px); overflow:hidden; }
.quadro img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:3px; box-shadow:0 2px 6px rgba(43,28,22,.12), 0 20px 40px -24px rgba(43,28,22,.45); }
.f-faixa .quadro { height:auto; padding:clamp(12px, 2vw, 28px); }
.f-faixa .quadro img { width:100%; }
.f-paisagem .quadro { height:clamp(300px, 54vh, 580px); }
.galeria figure { margin:0; }
.galeria figcaption { margin-top:16px; max-width:44em; }
.galeria figcaption > p { font-family:var(--gr); font-size:15.5px; line-height:1.5; color:var(--suave); }
.galeria .original { margin-top:4px; }
.legenda { margin-top:8px; border-top:1px solid var(--linha); }
.legenda summary { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none; font-family:var(--gr); font-size:15.5px; font-weight:500; color:var(--tinta); }
.legenda summary::-webkit-details-marker { display:none; }
.legenda summary::before { content:"+"; width:16px; font-size:19px; color:var(--acento); }
.legenda[open] summary::before { content:"–"; }
.legenda p { margin-top:8px; font-size:16.5px; color:var(--texto); }
.legenda p.nota { font-size:14px; }

.carrossel { position:relative; }
.trilho { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; }
.trilho::-webkit-scrollbar { display:none; }
.trilho:focus-visible { outline-offset:4px; }
.slide { flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; }
.car-nav { display:flex; align-items:center; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--linha); }
.car-bt { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linha-forte); transition:background .2s, color .2s, opacity .2s; flex:none; }
.car-bt:hover:not(:disabled) { background:var(--tinta); color:var(--fundo); box-shadow:none; }
.car-bt:disabled { opacity:.35; cursor:default; }
.pontos { display:flex; flex-wrap:wrap; }
.pontos button { width:28px; height:44px; display:grid; place-items:center; }
.pontos button::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--linha-forte); transition:background .2s, transform .2s; }
.pontos button[aria-current="true"]::before { background:var(--acento); transform:scale(1.3); }
.contador { margin-left:auto; font-family:var(--gr); font-size:15px; font-weight:500; color:var(--suave); font-variant-numeric:tabular-nums; white-space:nowrap; }

.dupla { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.2vw, 28px); }
.dupla .quadro { height:clamp(340px, 58vh, 620px); }
.video .quadro { cursor:pointer; }
.video .play { position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:rgba(251,245,238,.95); color:#2B1C16; display:grid; place-items:center; box-shadow:0 10px 28px rgba(0,0,0,.3); transition:transform .3s; }
.video .play .ico { width:28px; height:28px; margin-left:4px; }
.video .quadro:hover .play { transform:scale(1.08); }
:root[data-tema="noite"] .quadro img { filter:brightness(.92); }

/* leitura de textos completos */
.leitura { max-width:40em; font-size:clamp(18px, 1.25vw, 20px); line-height:1.75; }
.leitura p + p, .leitura ul + p { margin-top:1.1em; }
.leitura h3 { font-size:clamp(24px, 2vw, 30px); line-height:1.2; margin:1.6em 0 .6em; }
.leitura h3:first-child, .aviso-idioma + h3 { margin-top:0; }
.leitura ul { margin:1em 0 0 1.2em; }
.leitura li + li { margin-top:.4em; }
.aviso-idioma { font-family:var(--gr); font-size:14.5px; color:var(--suave); padding:10px 14px; background:var(--quadro); border-radius:4px; display:inline-block; margin-bottom:22px; }

/* próximo trabalho */
.proximo a { display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:center; padding:30px 0; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); }
.proximo b { font-size:clamp(24px, 2.6vw, 36px); line-height:1.15; color:var(--tinta); grid-column:1; }
.proximo .seta { grid-row:1 / span 2; grid-column:2; font-size:30px; color:var(--acento); transition:transform .3s; }
.proximo a:hover .seta { transform:translateX(6px); }

/* ── consultoria ── */
.servicos { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.2vw, 28px); }
.servico { background:var(--superficie); border-radius:6px; padding:clamp(24px, 2.6vw, 34px); box-shadow:var(--sombra); scroll-margin-top:96px; }
.servico h3 { font-size:clamp(23px, 2vw, 28px); line-height:1.15; }
.servico-para { font-family:var(--gr); font-size:14.5px; font-weight:500; color:var(--acento); margin:8px 0 16px; }
.servico > p:not(.servico-para) { font-size:16.5px; color:var(--texto); }
.servico ul { list-style:none; margin-top:20px; border-top:1px solid var(--linha); }
.servico li { padding:10px 0 10px 22px; border-bottom:1px solid var(--linha); font-size:16px; position:relative; }
.servico li::before { content:""; position:absolute; left:2px; top:21px; width:8px; height:1.5px; background:var(--acento); }
.etapas { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 3vw, 48px); }
.etapas li { border-top:2px solid var(--tinta); padding-top:22px; }
.etapa-n { font-size:44px; line-height:1; color:var(--acento); }
.etapas h3 { font-size:clamp(23px, 2vw, 28px); margin:12px 0 10px; }
.etapas p { color:var(--suave); font-size:16.5px; }
/* ciclo mensal: a linha do tempo do infográfico dela, em texto */
.ciclo { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:0 clamp(20px, 3vw, 40px); }
.ciclo li { display:flex; gap:16px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--linha); }
.ciclo-n { font-family:var(--gr); font-size:14px; font-weight:600; color:var(--acento); letter-spacing:.06em; flex:none; }
.ciclo li > span:last-child { color:var(--tinta); font-size:17.5px; line-height:1.4; }
.depoimentos { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.2vw, 28px); align-items:start; }
.depoimentos figure { background:var(--superficie); border-radius:6px; padding:clamp(24px, 2.6vw, 32px); box-shadow:var(--sombra); margin:0; }
.depoimentos blockquote p { font-size:17px; line-height:1.6; color:var(--texto); }
.depoimentos figcaption { margin-top:18px; font-family:var(--gr); font-size:15px; }
.investimento { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px, 5vw, 72px); align-items:center; }
.investimento figure { border-radius:6px; overflow:hidden; aspect-ratio:4 / 5; margin:0; }
.investimento img { width:100%; height:100%; object-fit:cover; }
.investimento h2 { font-size:clamp(30px, 3vw, 42px); line-height:1.14; margin:12px 0 18px; }
.investimento p:not(.kicker) { margin-bottom:28px; color:var(--texto); }
.perguntas { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(24px, 5vw, 72px); }
.perguntas details { border-bottom:1px solid var(--linha); }
.perguntas details:first-child { border-top:1px solid var(--linha); }
.perguntas summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:20px 0; font-size:clamp(20px, 1.7vw, 24px); color:var(--tinta); }
.perguntas summary::-webkit-details-marker { display:none; }
.perguntas summary span { width:14px; height:14px; position:relative; flex:none; }
.perguntas summary span::before, .perguntas summary span::after { content:""; position:absolute; left:0; right:0; top:6px; height:1.6px; background:var(--acento); transition:transform .3s; }
.perguntas summary span::after { transform:rotate(90deg); }
.perguntas details[open] summary span::after { transform:rotate(0); }
.perguntas details p { padding:0 0 22px; color:var(--texto); max-width:36em; }

/* ── sobre ── */
.sobre-abertura { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(28px, 5vw, 72px); align-items:center; padding-top:clamp(40px, 6vw, 80px); }
.sobre-abertura figure { border-radius:6px; overflow:hidden; aspect-ratio:4 / 5; background:var(--quadro); margin:0; }
.sobre-abertura figure img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.sobre-abertura h1 { font-size:clamp(36px, 4.2vw, 58px); line-height:1.08; margin:14px 0 24px; }
.sobre-abertura p:not(.kicker) + p { margin-top:1em; }
.fotos-trio { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 24px); }
.fotos-trio figure { margin:0; }
.fotos-trio img { width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:6px; }
.fotos-trio figcaption { margin-top:10px; font-family:var(--gr); font-size:14.5px; color:var(--suave); }
.segmentos { list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.segmentos li { padding:10px 18px; border-radius:999px; background:var(--superficie); box-shadow:inset 0 0 0 1px var(--linha); font-family:var(--gr); font-size:15.5px; color:var(--tinta); }
.diferenciais { display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px, 2.6vw, 36px); }
.diferenciais div { border-top:2px solid var(--tinta); padding-top:18px; }
.diferenciais dt { font-size:clamp(21px, 1.7vw, 24px); line-height:1.2; color:var(--tinta); }
.diferenciais dd { margin-top:10px; color:var(--suave); font-size:16.5px; }
.trajetoria { list-style:none; border-top:1px solid var(--linha); }
.trajetoria li { display:grid; grid-template-columns:120px minmax(0, 1fr); gap:24px; padding:24px 0; border-bottom:1px solid var(--linha); }
.trajetoria .ano { font-size:28px; line-height:1.2; color:var(--acento); }
.trajetoria h3 { font-size:clamp(21px, 1.8vw, 25px); line-height:1.2; }
.trajetoria p { margin-top:6px; color:var(--suave); max-width:40em; }
.assinatura { margin-top:40px; }
.ass-txt { font-family:'Mrs Saint Delafield', cursive; font-size:clamp(52px, 6vw, 76px); line-height:1; color:var(--tinta); }

/* ── contato ── */
.contato { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .9fr); gap:clamp(28px, 5vw, 72px); align-items:start; margin-top:clamp(36px, 5vw, 56px); }
.briefing { display:flex; flex-direction:column; gap:22px; background:var(--superficie); border-radius:6px; padding:clamp(24px, 3vw, 40px); box-shadow:var(--sombra); }
.briefing label:not(.opcao) > span, .briefing legend { display:block; font-family:var(--gr); font-size:15px; font-weight:500; color:var(--tinta); margin-bottom:8px; }
.briefing input:not([type="radio"]), .briefing textarea { width:100%; font:inherit; font-size:17px; color:var(--tinta); background:var(--fundo); border:1px solid var(--linha-forte); border-radius:6px; padding:13px 14px; transition:border-color .2s, box-shadow .2s; }
.briefing input:focus, .briefing textarea:focus { outline:none; border-color:var(--acento); box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }
.briefing input::placeholder { color:var(--suave); opacity:.8; }
.briefing fieldset { border:0; display:flex; flex-wrap:wrap; gap:8px; }
.briefing legend { width:100%; }
.opcao { position:relative; }
.opcao input { position:absolute; opacity:0; }
.opcao span { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--linha-forte); font-family:var(--gr); font-size:15px; cursor:pointer; transition:background .2s, color .2s; }
.opcao input:checked + span { background:var(--tinta); color:var(--fundo); box-shadow:none; }
.opcao input:focus-visible + span { outline:2px solid var(--acento); outline-offset:2px; }
.briefing .bt { align-self:flex-start; }
.contato-redes { display:flex; flex-direction:column; gap:10px; }
.contato-redes .kicker { margin-bottom:6px; }
.rede-cartao { display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:6px; background:var(--superficie); box-shadow:var(--sombra); transition:transform .25s; }
.rede-cartao:hover { transform:translateX(4px); }
.rede-cartao .ico { width:26px; height:26px; color:var(--acento); }
.rede-cartao b { display:block; font-family:var(--gr); font-size:15.5px; font-weight:600; }
.rede-cartao span span { font-family:var(--gr); font-size:14.5px; color:var(--suave); overflow-wrap:anywhere; }

/* ── rodapé ── */
.rodape { margin-top:var(--respiro); border-top:1px solid var(--linha); }
.faixa-escura + .rodape { margin-top:0; border-top:0; }
.rodape-in { width:min(100% - 2 * var(--lado), var(--largura)); margin-inline:auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding:56px 0 36px; }
.rodape-marca .assinatura { margin-top:0; }
.rodape-marca .ass-txt { font-size:58px; }
.rodape-marca p { margin-top:8px; font-family:var(--gr); font-size:15px; color:var(--suave); max-width:24em; }
.rodape-menu { display:flex; flex-direction:column; gap:2px; }
.rodape-menu a { font-family:var(--gr); font-size:15.5px; color:var(--texto); padding:6px 0; width:fit-content; min-height:36px; }
.rodape-menu a:hover { color:var(--acento); }
.rodape-redes .redes { margin-top:14px; }
.rodape-pe { width:min(100% - 2 * var(--lado), var(--largura)); margin-inline:auto; padding:18px 0 28px; border-top:1px solid var(--linha); font-family:var(--gr); font-size:14px; color:var(--suave); }

/* ── telas menores ── */
@media (max-width: 1020px) {
  .menu, .chaves .tema span { display:none; }
  .abre-menu { display:block; }
  .chaves { margin-left:auto; }
  .cartoes, .servicos, .depoimentos { grid-template-columns:1fr 1fr; }
  .diferenciais { grid-template-columns:1fr 1fr; }
  .ciclo { grid-template-columns:1fr 1fr; }
}
@media (max-width: 820px) {
  :root { --respiro:clamp(56px, 13vw, 80px); }
  .heroi { flex-direction:column; align-items:stretch; min-height:0; }
  .heroi-foto { position:relative; width:100%; height:min(68svh, 560px); }
  .heroi-foto img { object-position:62% 28%; }
  .heroi-foto::after { background:linear-gradient(180deg, rgba(53,48,44,.55) 0%, rgba(53,48,44,0) 26%, rgba(53,48,44,0) 62%, var(--heroi) 100%); }
  :root[data-tema="noite"] .heroi-foto::after { background:linear-gradient(180deg, rgba(21,16,13,.6) 0%, rgba(21,16,13,0) 26%, rgba(21,16,13,0) 62%, var(--heroi) 100%); }
  .heroi-txt { padding:0 0 56px; margin-top:-40px; }
  .numeros { grid-template-columns:1fr 1fr; }
  .numeros > div { padding:22px 16px 18px 0; border-bottom:1px solid var(--linha); }
  .numeros > div + div { padding-left:0; border-left:0; }
  .numeros > div:nth-child(even) { padding-left:16px; border-left:1px solid var(--linha); }
  .destaques { grid-template-columns:1fr; }
  .destaques .grande { grid-row:auto; }
  .destaques .grande .cartao-img { aspect-ratio:4 / 3; min-height:0; }
  .areas a { grid-template-columns:1fr; gap:6px; padding:20px 0; }
  .artigo-destaque, .investimento, .convite, .peca-abertura, .sobre-abertura, .duas-colunas, .perguntas, .contato { grid-template-columns:minmax(0, 1fr); }
  .peca-capa { order:-1; aspect-ratio:4 / 3; }
  .sobre-abertura figure { aspect-ratio:4 / 4.4; }
  .etapas { grid-template-columns:1fr; }
  .fotos-trio { grid-template-columns:1fr 1fr; }
  .fotos-trio figure:first-child { grid-column:1 / -1; }
  .fotos-trio figure:first-child img { aspect-ratio:4 / 3; object-position:50% 25%; }
  .rodape-in { grid-template-columns:1fr 1fr; }
  .rodape-marca { grid-column:1 / -1; }
  .quadro { height:min(72svh, 580px); padding:14px; }
  .f-paisagem .quadro, .f-quadrado .quadro { height:auto; min-height:0; }
  .f-paisagem .quadro img, .f-quadrado .quadro img { width:100%; }
  .dupla { grid-template-columns:1fr; }
  .dupla .quadro { height:auto; }
  .dupla .quadro img { width:100%; }
}
@media (max-width: 600px) {
  body { font-size:17px; }
  .cartoes, .servicos, .depoimentos, .diferenciais, .ciclo { grid-template-columns:1fr; }
  .ficha { gap:14px 18px; }
  .trajetoria li { grid-template-columns:1fr; gap:4px; }
  .marca { font-size:21px; }
  .topo-in { gap:12px; }
  .idioma { padding:0 6px; }
  .car-nav { gap:6px; }
  .pontos button { width:22px; }
  .marcado { white-space:normal; }
  .cab h1, .sobre-abertura h1, .peca-abertura h1 { overflow-wrap:break-word; hyphens:auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; scroll-behavior:auto !important; }
}

/* ajustes depois da primeira conferência (28/10/2026) */
.p-heroi .topo .idioma b { color:#CDBFB2; }
.p-heroi .topo .idioma b.on { color:#FBF5EE; }
.cartao-texto p { font-family:var(--s); font-style:italic; font-weight:300; font-size:clamp(17px, 1.3vw, 19px); line-height:1.5; color:var(--texto); -webkit-line-clamp:6; }
/* celular: na lista de trabalhos, cartão compacto (capa pequena ao lado do título) para a página não virar uma coluna sem fim */
@media (max-width: 600px) {
  .cartoes { gap:12px; }
  .cartoes .cartao { display:grid; grid-template-columns:112px minmax(0, 1fr); }
  .cartoes .cartao-img { aspect-ratio:auto; height:100%; min-height:132px; }
  .cartoes .cartao-texto { padding:14px; justify-content:flex-start; }
  .cartoes .cartao-texto .aspas { font-size:44px; }
  .cartoes .cartao-texto p { display:none; }
  .cartoes .cartao-txt { padding:14px 16px 16px; gap:6px; }
  .cartoes .cartao-txt > p:not(.cartao-meta) { display:none; }
  .cartoes .cartao h3 { font-size:19px; }
  .cartoes .cartao-meta { font-size:12px; letter-spacing:.08em; }
  .cartoes .cartao-mais { font-size:14px; margin-top:2px; }
}
.quadro video { max-width:100%; max-height:100%; border-radius:3px; background:#000; box-shadow:0 2px 6px rgba(43,28,22,.12), 0 20px 40px -24px rgba(43,28,22,.45); }
/* diagnóstico (28/10/2026): cabeçalho com fundo sólido, rótulos de 13,5 px, alvos de toque de 44 px */
.topo { background:var(--fundo); backdrop-filter:none; -webkit-backdrop-filter:none; }
.p-heroi .topo { background:none; }
.heroi .kicker { color:#F2C2A6; }
.kicker, .ficha dt, .cartao-meta { font-size:13.5px; }
@media (max-width: 600px) { .cartoes .cartao-meta { font-size:13.5px; letter-spacing:.06em; } }
.marca { display:inline-flex; align-items:center; min-height:44px; }
.lk { display:inline-block; padding:10px 0; border-bottom:0; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.rodape-menu a { display:flex; align-items:center; min-height:44px; padding:0; }
.galeria figcaption { max-width:40em; }

/* ── sem padrões de página gerada (28/10/2026) ──
   Nada de rótulo em caixa alta acima dos títulos, nem números em caixas, nem colunas numeradas:
   o que é dado vira frase; o que é processo vira texto corrido ou uma linha que flui. */
.rotulo { font-family:var(--gr); font-size:15px; font-weight:500; color:var(--acento); line-height:1.4; }
.meta { font-family:var(--gr); font-size:15px; color:var(--suave); }
.heroi h1 { margin-top:0; }
.heroi-papel { margin-top:16px; font-family:var(--s); font-style:italic; font-weight:300; font-size:clamp(20px, 1.7vw, 25px); color:#F2DCCB; }
.heroi-sub { margin-top:14px; }
/* a apresentação do início: uma frase grande, sem caixas */
.apresentacao { max-width:980px; }
.apresentacao p { font-size:clamp(26px, 3vw, 40px); line-height:1.28; color:var(--tinta); text-wrap:pretty; }
.apresentacao .lk { margin-top:18px; }
/* números de um trabalho: uma lista corrida, número e frase na mesma linha */
.contas { list-style:none; border-top:1px solid var(--linha); }
.contas li { padding:16px 0; border-bottom:1px solid var(--linha); font-size:clamp(17px, 1.25vw, 19px); color:var(--texto); }
.contas b { font-size:clamp(28px, 2.6vw, 36px); color:var(--tinta); font-weight:400; margin-right:.3em; }
/* texto corrido com a palavra-chave em negrito no começo do parágrafo */
.corrido p + p { margin-top:1.1em; }
.corrido b { font-family:var(--g); font-weight:400; font-size:1.12em; }
/* ciclo mensal: uma sequência que flui com setas, como na linha do infográfico dela */
.ciclo { list-style:none; display:flex; flex-wrap:wrap; gap:6px 0; grid-template-columns:none; margin-top:20px; }
.ciclo li { display:inline; padding:0; border:0; font-family:var(--g); font-size:clamp(20px, 1.8vw, 26px); line-height:1.4; color:var(--tinta); }
.ciclo li:not(:last-child)::after { content:"→"; font-family:var(--gr); font-size:.75em; color:var(--acento); margin:0 .5em; }
.duas-colunas .ciclo { margin-top:0; }
/* depoimentos: citações empilhadas, sem cartões */
.depoimentos { display:block; }
.depoimentos figure { background:none; box-shadow:none; padding:0 0 0 22px; border-left:2px solid var(--acento); border-radius:0; }
.depoimentos figure + figure { margin-top:34px; }
.depoimentos blockquote p { font-size:clamp(18px, 1.35vw, 20px); line-height:1.6; }
/* clientes numa frase */
.clientes p.g { font-size:clamp(22px, 2.2vw, 30px); line-height:1.35; color:var(--tinta); max-width:34em; }
.clientes { padding-top:32px; }
@media (max-width: 1020px) { .ciclo { grid-template-columns:none; } }
@media (max-width: 600px) { .ciclo { grid-template-columns:none; } .depoimentos { display:block; } }
.apresentacao { max-width:none; }
.apresentacao p { max-width:30em; }
.cartao-meta { text-transform:none; letter-spacing:0; font-size:14.5px; font-weight:500; }
.ficha dt { text-transform:none; letter-spacing:0; font-size:14.5px; font-weight:500; }

/* ── caixas de contraste (pedido da Margella, retomado em 28/10/2026) ──
   Todo bloco de texto fica numa caixa clara sobre o fundo; as seções que já são feitas de cartões
   (trabalhos, serviços), as fotos soltas e o formulário ficam de fora, porque já têm caixa própria. */
.cab, .peca-abertura, .sobre-abertura,
main > .sec.w:not(.area):not(.fotos-trio):not(.contato):not(.proximo):not(:has(.cartoes, .destaques, .servicos)) {
  background:var(--superficie); border-radius:8px; box-shadow:var(--sombra); padding:clamp(28px, 4.6vw, 64px);
}
.cab { margin-top:clamp(28px, 4vw, 48px); padding-top:clamp(36px, 5vw, 68px); }
.peca-abertura, .sobre-abertura { margin-top:clamp(28px, 4vw, 48px); }
main > .sec { margin-top:clamp(28px, 4vw, 52px); }
main > .faixa-escura { margin-top:clamp(56px, 7vw, 96px); }
/* dentro da caixa, o que era "superfície" passa a ser o fundo, para continuar se destacando */
.originais { background:var(--fundo); box-shadow:none; }
.segmentos li { background:var(--fundo); }
.contas, .areas, .trajetoria, .perguntas details:first-child { border-top-color:var(--linha); }
.areas a:hover { padding-left:12px; }
.clientes { border-top:0; }
.em-breve { border-top:0; }
.proximo a { border-top:0; border-bottom:0; background:var(--superficie); border-radius:8px; box-shadow:var(--sombra); padding:clamp(24px, 3.4vw, 40px); }
.depoimento { max-width:none; }
.depoimento blockquote, .depoimento-quem { max-width:900px; margin-inline:auto; }
@media (max-width: 820px) {
  .cab, .peca-abertura, .sobre-abertura,
  main > .sec.w:not(.area):not(.fotos-trio):not(.contato):not(.proximo):not(:has(.cartoes, .destaques, .servicos)) { padding:24px 20px 28px; }
  .peca-abertura, .sobre-abertura { gap:24px; }
}

/* ── rodada de 28/10/2026 (tarde) ── */
/* marcos do início: três números numa caixa, como na referência que o David mandou */
.marcos dl { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.marcos dt { font-family:var(--gr); font-weight:600; font-size:clamp(30px, 3vw, 40px); line-height:1.1; color:var(--tinta); letter-spacing:-.01em; }
.marcos dd { margin-top:12px; font-family:var(--gr); font-size:16px; color:var(--suave); }
main > .sec.w.marcos { padding-block:clamp(26px, 3.4vw, 40px); }
/* destaques em lista: texto à esquerda, miniaturas dos posts à direita (cada uma leva à galeria) */
.lista-destaques { list-style:none; display:flex; flex-direction:column; gap:clamp(16px, 2vw, 24px); }
.lista-destaques > li { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:clamp(20px, 3.4vw, 48px); align-items:center; background:var(--superficie); border-radius:8px; box-shadow:var(--sombra); padding:clamp(20px, 2.8vw, 34px); }
.ld-txt { display:flex; flex-direction:column; gap:8px; }
.ld-txt h3 { font-size:clamp(23px, 2.1vw, 30px); line-height:1.15; }
.ld-txt > p:not(.cartao-meta) { color:var(--suave); font-size:16.5px; }
.ld-txt:hover .cartao-mais { color:var(--acento); }
.ld-mini { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
/* com menos de quatro peças, as miniaturas mantêm o mesmo tamanho */
.ld-mini a { display:block; aspect-ratio:4 / 5; border-radius:5px; overflow:hidden; background:var(--quadro); transition:transform .3s, box-shadow .3s; }
.ld-mini a:hover { transform:translateY(-3px); box-shadow:var(--sombra); }
.ld-mini img { width:100%; height:100%; object-fit:cover; }
.ld-mini:empty { display:none; }
/* preço inicial de cada serviço */
.servico-preco { margin:4px 0 14px; padding:14px 0; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); }
.servico-preco b { font-size:clamp(24px, 2.2vw, 30px); color:var(--tinta); font-weight:400; }
.servico-preco span { font-family:var(--gr); font-size:15px; color:var(--suave); }
.servico-inclui { margin-top:18px; font-family:var(--gr); font-size:15px; font-weight:600; color:var(--tinta); }
.servico ul { margin-top:8px; }
.servico .nota { margin-top:14px; }
/* depoimentos em slide, numa faixa escura */
.depo h2 { margin-bottom:clamp(24px, 3vw, 40px); }
.depo-slide { padding-right:clamp(0px, 8vw, 120px); }
.depo-aspas { display:block; font-size:clamp(80px, 9vw, 130px); line-height:.7; color:var(--acento-escuro); height:.45em; }
.depo-slide blockquote p { font-size:clamp(22px, 2.3vw, 32px); line-height:1.38; color:var(--sobre-escuro); max-width:30em; }
.depo-slide figcaption { display:flex; align-items:center; gap:14px; margin-top:28px; font-family:var(--gr); }
.depo-inicial { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--acento-escuro); color:var(--escuro); font-size:20px; flex:none; }
.depo-slide figcaption b { display:block; color:var(--sobre-escuro); font-size:16.5px; font-weight:600; }
.depo-slide figcaption span span { color:var(--sobre-escuro-suave); font-size:15px; }
.depo .car-nav { border-top-color:rgba(245,238,230,.18); margin-top:32px; }
.depo .car-bt { color:var(--sobre-escuro); box-shadow:inset 0 0 0 1px rgba(245,238,230,.35); }
.depo .car-bt:hover:not(:disabled) { background:var(--sobre-escuro); color:var(--escuro); }
.depo .pontos button::before { background:rgba(245,238,230,.3); }
.depo .pontos button[aria-current="true"]::before { background:var(--acento-escuro); }
.depo .contador { color:var(--sobre-escuro-suave); }
main > .faixa-escura.depo { margin-top:clamp(28px, 4vw, 52px); }
.faixa-escura.depo + .sec { margin-top:clamp(28px, 4vw, 52px); }
/* currículo */
.cv { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:clamp(28px, 5vw, 72px); }
.cv-tit { font-family:var(--gr); font-size:15px; font-weight:600; color:var(--acento); margin-bottom:6px; }
.cv-lado .cv-tit:not(:first-child) { margin-top:30px; }
.cv ol { list-style:none; }
.cv ol li { display:grid; grid-template-columns:104px minmax(0, 1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--linha); }
.cv-quando { font-family:var(--gr); font-size:14.5px; color:var(--suave); padding-top:2px; font-variant-numeric:tabular-nums; }
.cv ol b { display:block; font-family:var(--g); font-weight:400; font-size:clamp(19px, 1.5vw, 21px); line-height:1.25; color:var(--tinta); }
.cv ol li span:not(.cv-quando) { display:block; margin-top:2px; font-family:var(--gr); font-size:15px; color:var(--suave); }
.cv-simples { list-style:none; }
.cv-simples li { padding:10px 0; border-bottom:1px solid var(--linha); color:var(--tinta); }
@media (max-width: 820px) {
  .lista-destaques > li { grid-template-columns:minmax(0, 1fr); }
  .ld-mini { order:-1; }
  .cv { grid-template-columns:minmax(0, 1fr); }
  .depo-slide { padding-right:0; }
}
@media (max-width: 600px) {
  .marcos dl { gap:12px; }
  .marcos dt { font-size:26px; }
  .marcos dd { font-size:14px; }
  .cv ol li { grid-template-columns:1fr; gap:2px; }
  .ld-mini { gap:6px; }
}
main > .sec.w:has(.lista-destaques) { background:none !important; box-shadow:none !important; padding:0 !important; }

/* ── acabamento das caixas (28/10/2026, noite) ──
   A Margella achou as caixas brancas "brutas". Agora elas lembram papel de carta fino: tom creme em leve degradê,
   grão de papel quase invisível, um fio interno de passe-partout e uma sombra baixa e quente, sem o bloco duro. */
:root {
  --papel-a:#FFFCF7; --papel-b:#FAF3EA; --fio:rgba(127,54,29,.16); --borda-caixa:rgba(91,60,40,.10);
  --sombra-caixa:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(60,36,22,.05), 0 22px 44px -34px rgba(80,45,25,.42);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .14 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
:root[data-tema="noite"] {
  --papel-a:#2C221B; --papel-b:#261D17; --fio:rgba(237,170,130,.16); --borda-caixa:rgba(243,230,214,.08);
  --sombra-caixa:0 1px 0 rgba(255,255,255,.03) inset, 0 22px 44px -30px rgba(0,0,0,.75);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.cab, .peca-abertura, .sobre-abertura,
main > .sec.w:not(.area):not(.fotos-trio):not(.contato):not(.proximo):not(:has(.cartoes, .destaques, .servicos, .lista-destaques)) {
  position:relative; border-radius:14px; border:1px solid var(--borda-caixa); box-shadow:var(--sombra-caixa);
  background:var(--grao), linear-gradient(170deg, var(--papel-a) 0%, var(--papel-b) 100%);
}
/* o fio de passe-partout, a 10 px da borda */
.cab::before, .peca-abertura::before, .sobre-abertura::before,
main > .sec.w:not(.area):not(.fotos-trio):not(.contato):not(.proximo):not(:has(.cartoes, .destaques, .servicos, .lista-destaques))::before {
  content:""; position:absolute; inset:10px; border:1px solid var(--fio); border-radius:9px; pointer-events:none;
}
/* o conteúdo fica acima do fio */
.cab > *, .peca-abertura > *, .sobre-abertura > *,
main > .sec.w:not(.area):not(.fotos-trio):not(.contato):not(.proximo):not(:has(.cartoes, .destaques, .servicos, .lista-destaques)) > * { position:relative; }
/* cartões, serviços, destaques, formulário e contatos: o mesmo papel, com borda fina no lugar da sombra pesada */
.cartao, .servico, .lista-destaques > li, .briefing, .rede-cartao, .proximo a, .depoimentos figure {
  border-radius:12px; border:1px solid var(--borda-caixa); box-shadow:var(--sombra-caixa);
  background:var(--grao), linear-gradient(170deg, var(--papel-a) 0%, var(--papel-b) 100%);
}
.depoimentos figure { background:none; border:0; box-shadow:none; }
.cartao:hover, .lista-destaques > li:hover { box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(60,36,22,.06), 0 28px 54px -32px rgba(80,45,25,.55); }
.cartao-img { border-radius:0; }
.cartao-txt { border-top:1px solid var(--borda-caixa); }
/* serviços: o preço ganha um fundo de cor da casa, como um selo */
.servico-preco { border:0; background:color-mix(in srgb, var(--acento) 7%, transparent); border-radius:8px; padding:14px 16px; }
/* caixas internas (onde foi publicado, segmentos) acompanham o papel */
.originais { background:color-mix(in srgb, var(--acento) 6%, transparent); border:1px solid var(--fio); border-radius:10px; }
.segmentos li { background:color-mix(in srgb, var(--acento) 6%, transparent); box-shadow:inset 0 0 0 1px var(--fio); }
.quadro { border-radius:10px; background:color-mix(in srgb, var(--quadro) 88%, var(--acento) 4%); }
.peca-capa, .sobre-abertura figure, .artigo-destaque figure, .investimento figure, .fotos-trio img { border-radius:10px; }
@media (max-width: 820px) {
  .cab::before, .peca-abertura::before, .sobre-abertura::before,
  main > .sec.w:not(.area):not(.fotos-trio):not(.contato):not(.proximo):not(:has(.cartoes, .destaques, .servicos, .lista-destaques))::before { inset:7px; border-radius:8px; }
}
.servico > p.nota { font-size:14.5px; color:var(--suave); line-height:1.5; }

/* ── ajustes de 28/10/2026 (noite, 2) ── */
/* início: a foto começa abaixo do cabeçalho, para o menu não passar por cima da cabeça dela */
.heroi-foto { top:73px; }
.heroi-foto::after { background:linear-gradient(90deg, var(--heroi) 0%, rgba(53,48,44,0) 42%), linear-gradient(180deg, var(--heroi) 0%, rgba(53,48,44,0) 12%); }
@media (max-width: 820px) {
  .heroi { padding-top:73px; }
  .heroi-foto { top:auto; }
  .heroi-foto::after { background:linear-gradient(180deg, rgba(53,48,44,0) 0%, rgba(53,48,44,0) 60%, var(--heroi) 100%); }
}
/* destaques com só duas peças: as miniaturas ficam centradas no lado delas, no mesmo tamanho */
.ld-mini:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2, minmax(0, calc((100% - 30px) / 4))); justify-content:center; }
/* foto dela embaixo do título, nas caixas de duas colunas */
.lado-foto { margin:28px 0 0; border-radius:10px; overflow:hidden; aspect-ratio:4 / 5; max-width:340px; box-shadow:0 18px 36px -26px rgba(60,36,22,.55); }
.lado-foto img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.perguntas .secao-cab { margin-bottom:0; }
@media (max-width: 820px) { .lado-foto { max-width:none; aspect-ratio:4 / 3.4; margin-top:20px; } .lado-foto img { object-position:50% 25%; } }
/* clientes: grade com o segmento de cada um, separada por fios */
.clientes-grade { list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--linha); border-left:1px solid var(--linha); }
.clientes-grade li { padding:22px 20px; border-right:1px solid var(--linha); border-bottom:1px solid var(--linha); display:flex; flex-direction:column; gap:6px; }
.clientes-grade b { font-weight:400; font-size:clamp(20px, 1.7vw, 24px); line-height:1.15; color:var(--tinta); }
.clientes-grade span { font-family:var(--gr); font-size:14.5px; color:var(--suave); }
@media (max-width: 820px) { .clientes-grade { grid-template-columns:1fr 1fr; } .clientes-grade li { padding:16px 14px; } }
/* depoimento do início: itálico leve, aspas grandes e as iniciais, como no slide da consultoria */
.depoimento { text-align:left; }
.depoimento .depo-aspas { color:var(--acento); }
.depoimento blockquote p { font-family:var(--s); font-style:italic; font-weight:300; font-size:clamp(22px, 2.2vw, 30px); line-height:1.45; color:var(--tinta); max-width:34em; margin:0; }
.depoimento-quem { display:flex; align-items:center; gap:14px; margin-top:26px; }
.depoimento-quem .depo-inicial { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--acento); color:var(--superficie); font-size:18px; flex:none; }
.depoimento blockquote, .depoimento-quem { margin-inline:0; }
/* crédito da imagem de capa (obra de artista, imagem de divulgação) */
.peca-capa { position:relative; }
.peca-capa figcaption { position:absolute; left:0; right:0; bottom:0; padding:10px 14px; font-family:var(--gr); font-size:13.5px; color:#FBF5EE; background:linear-gradient(0deg, rgba(20,14,10,.7), rgba(20,14,10,0)); }
.clientes ul.clientes-grade { display:grid; gap:0; margin-top:0; }
.clientes .clientes-grade li { font-size:inherit; }
.clientes .clientes-grade li::after { content:none; }
/* início: a foto é em pé e a área é larga; ancorada pelo topo, a cabeça aparece inteira, com respiro acima */
.heroi-foto img { object-position:50% 0%; }
.heroi-foto::after { background:linear-gradient(90deg, var(--heroi) 0%, rgba(53,48,44,0) 42%); }
:root[data-tema="noite"] .heroi-foto::after { background:linear-gradient(90deg, var(--heroi) 0%, rgba(21,16,13,0) 45%); }
@media (max-width: 820px) { .heroi-foto img { object-position:62% 0%; } .heroi-foto::after { background:linear-gradient(180deg, rgba(53,48,44,0) 60%, var(--heroi) 100%); } }
/* meio-termo: um pouco de respiro acima da cabeça sem cortar a cadeira nas telas largas */
.heroi-foto img { object-position:50% 14%; }

/* caixas com foto: título e texto à esquerda, foto à direita na altura do texto (sem o vazio que sobrava ao lado da foto) */
main > .sec.w:has(.lado-foto) { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, .8fr); grid-template-rows:auto 1fr; column-gap:clamp(28px, 5vw, 64px); align-items:start; }
main > .sec.w:has(.lado-foto) > .secao-cab { display:contents; }
main > .sec.w:has(.lado-foto) > .secao-cab > h2 { grid-column:1; grid-row:1; margin-bottom:clamp(18px, 2.2vw, 28px); }
main > .sec.w:has(.lado-foto) > :not(.secao-cab) { grid-column:1; grid-row:2; }
main > .sec.w:has(.lado-foto) .lado-foto { grid-column:2; grid-row:1 / span 2; align-self:stretch; margin:0; max-width:none; aspect-ratio:auto; height:100%; min-height:340px; }
@media (max-width: 820px) {
  main > .sec.w:has(.lado-foto) { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto; }
  main > .sec.w:has(.lado-foto) > .secao-cab > h2, main > .sec.w:has(.lado-foto) > :not(.secao-cab), main > .sec.w:has(.lado-foto) .lado-foto { grid-column:1; grid-row:auto; }
  main > .sec.w:has(.lado-foto) .lado-foto { height:auto; min-height:0; aspect-ratio:4 / 3.4; margin-bottom:22px; }
}
/* fim de cada oferta: contato direto */
.servico { display:flex; flex-direction:column; }
.servico-contato { margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--linha); }
.servico ul + .servico-contato, .servico .nota + .servico-contato { margin-top:24px; }
.servico-contato p { font-family:var(--gr); font-size:15px; font-weight:600; color:var(--tinta); }
.servico-contato .rede { width:44px; height:44px; color:var(--acento); box-shadow:inset 0 0 0 1px var(--fio); }
.servico-contato .rede:hover { background:var(--acento); color:var(--superficie); }
main > .sec.w:has(.lado-foto) { grid-template-rows:min-content minmax(0, 1fr); }
/* a foto preenche a altura do texto, sem impor a altura natural dela */
main > .sec.w:has(.lado-foto) .lado-foto { position:relative; min-height:320px; }
main > .sec.w:has(.lado-foto) .lado-foto img { position:absolute; inset:0; }
@media (max-width: 820px) { main > .sec.w:has(.lado-foto) .lado-foto img { position:static; } }
main > .sec.w:has(.lado-foto) { row-gap:0; }
@media (max-width: 820px) { main > .sec.w:has(.lado-foto) .lado-foto { min-height:0; width:100%; } }
/* o contato fecha os três cartões na mesma linha, embaixo */
.servico ul + .servico-contato, .servico .nota + .servico-contato { margin-top:auto; }
.servico > ul, .servico > .nota { margin-bottom:24px; }

/* Diagnóstico de 28/10: depoimentos da consultoria no mesmo tom leve do início (o negrito grande pesava),
   pontos do carrossel com alvo de 24 px no celular e metadados dos cartões com 14 px. */
.depo-slide blockquote p { font-family:var(--s); font-style:italic; font-weight:300; font-size:clamp(20px, 2vw, 27px); line-height:1.5; letter-spacing:0; }
@media (max-width: 600px) {
  .pontos button { width:24px; }
  .cartoes .cartao-meta { font-size:14px; }
}

/* Aviso embaixo dos cartões de uma área (Política: trabalhos que ela faz e não expõe no portfólio). */
.area-nota { margin-top:clamp(20px, 2.4vw, 32px); max-width:44em; color:var(--suave); font-size:clamp(16px, 1.1vw, 17.5px); line-height:1.6; padding-left:18px; border-left:2px solid var(--acento); }
.area-nota .lk { white-space:nowrap; display:inline; line-height:inherit; padding:0; }

/* Início (29/10/2026): "Já escrevi para mais de 60 clientes" no lugar dos números, com as áreas em duas colunas. */
.campos { list-style:none; margin:clamp(18px, 2vw, 26px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(24px, 5vw, 72px); border-top:1px solid var(--linha); }
.campos li { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--linha); font-family:var(--gr); font-size:16.5px; color:var(--tinta); }
.campos .ico { width:17px; height:17px; flex:none; stroke:var(--acento); fill:none; stroke-width:2; }
.campos-nomes { margin-top:clamp(18px, 2vw, 26px); color:var(--suave); max-width:52em; }
@media (max-width: 600px) { .campos { grid-template-columns:1fr; } }
/* Depoimentos: cargo e relação de quem recomendou (LinkedIn); fonte com link para o perfil. */
.depo-slide blockquote p + p { margin-top:.8em; }
.depo-slide figcaption .depo-cargo { display:block; color:var(--sobre-escuro-suave); font-size:14.5px; line-height:1.4; margin-top:2px; }
.depo-slide figcaption .depo-rel { display:block; color:var(--sobre-escuro-suave); font-size:13.5px; opacity:.85; margin-top:4px; }
.depo-fonte { margin-top:24px; }
.depo .original.claro { color:var(--sobre-escuro); }

/* Carrossel: cada slide com a própria altura; o trilho acompanha o da vez (site.js). */
.carrossel .trilho { align-items:flex-start; transition:height .35s ease; }
@media (prefers-reduced-motion: reduce) { .carrossel .trilho { transition:none; } }
@media (max-width: 600px) { .campos { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:18px; } .campos li { font-size:15px; gap:8px; align-items:flex-start; } .campos .ico { margin-top:3px; } }
@media (max-width: 340px) { .campos { grid-template-columns:1fr; } }

/* As aspas do próximo depoimento vazavam 1 px na borda do carrossel. */
.depo-slide { overflow:hidden; }

/* Painel da medição (/painel): só para quem tem a chave. */
.pnl-body { background:var(--fundo); }
.pnl { max-width:1180px; margin:0 auto; padding:32px var(--lado) 48px; color:var(--texto); font-family:var(--gr); }
.pnl h1 { font-size:clamp(30px, 3.4vw, 42px); color:var(--tinta); }
.pnl-topo { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; }
.pnl-periodo { display:flex; flex-wrap:wrap; gap:6px; }
.pnl-periodo a { background:var(--superficie); box-shadow:inset 0 0 0 1px var(--linha-forte); border-radius:999px; padding:7px 14px; font-size:14px; font-weight:500; color:var(--tinta); }
.pnl-periodo a[aria-current] { background:var(--tinta); color:var(--fundo); box-shadow:none; }
.pnl-caixa { background:var(--superficie); border:1px solid var(--linha); border-radius:14px; padding:18px 20px; min-width:0; }
.pnl-caixa h2 { font-family:var(--g); font-weight:400; font-size:21px; color:var(--tinta); margin-bottom:12px; }
.pnl-numeros { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.pnl-rot { font-size:12.5px; font-weight:600; color:var(--suave); text-transform:uppercase; letter-spacing:.08em; }
.pnl-grande { font-family:var(--g); font-size:40px; line-height:1.15; color:var(--tinta); }
.pnl-nota { font-size:13.5px; color:var(--suave); }
.pnl-larga { margin-top:12px; }
.pnl-grade { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:12px; }
.pnl-graf { position:relative; height:180px; padding-top:18px; border-bottom:1px solid var(--linha); }
.pnl-max { position:absolute; top:0; left:0; font-size:12px; color:var(--suave); }
.pnl-cols { display:flex; align-items:flex-end; gap:2px; height:100%; }
.pnl-col { flex:1; height:100%; display:flex; align-items:flex-end; min-width:0; }
.pnl-col i { display:block; width:100%; background:var(--acento); border-radius:4px 4px 0 0; min-height:1px; opacity:.85; }
.pnl-col:hover i { opacity:1; }
.pnl-col i.h0 { background:var(--linha); }
.pnl-col i.h0{height:0%}.pnl-col i.h5{height:5%}.pnl-col i.h10{height:10%}.pnl-col i.h15{height:15%}.pnl-col i.h20{height:20%}.pnl-col i.h25{height:25%}.pnl-col i.h30{height:30%}.pnl-col i.h35{height:35%}.pnl-col i.h40{height:40%}.pnl-col i.h45{height:45%}.pnl-col i.h50{height:50%}.pnl-col i.h55{height:55%}.pnl-col i.h60{height:60%}.pnl-col i.h65{height:65%}.pnl-col i.h70{height:70%}.pnl-col i.h75{height:75%}.pnl-col i.h80{height:80%}.pnl-col i.h85{height:85%}.pnl-col i.h90{height:90%}.pnl-col i.h95{height:95%}.pnl-col i.h100{height:100%}
.pnl-eixo { display:flex; justify-content:space-between; font-size:12px; color:var(--suave); margin-top:6px; }
.pnl-lista { list-style:none; padding:0; margin:0; }
.pnl-lista li { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:7px 0; border-top:1px solid var(--linha); font-size:14px; }
.pnl-lista li:first-child { border-top:0; }
.pnl-nome { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnl-nome a { color:var(--acento); }
.pnl-nome small, .pnl-pag small { font-size:10px; font-weight:600; color:var(--acento); }
.pnl-num { font-weight:600; font-variant-numeric:tabular-nums; color:var(--tinta); }
.pnl-barra { grid-column:1 / -1; height:4px; background:var(--linha); border-radius:4px; overflow:hidden; }
.pnl-barra i { display:block; height:100%; background:var(--acento); border-radius:4px; }
.pnl-barra i.w0{width:0%}.pnl-barra i.w5{width:5%}.pnl-barra i.w10{width:10%}.pnl-barra i.w15{width:15%}.pnl-barra i.w20{width:20%}.pnl-barra i.w25{width:25%}.pnl-barra i.w30{width:30%}.pnl-barra i.w35{width:35%}.pnl-barra i.w40{width:40%}.pnl-barra i.w45{width:45%}.pnl-barra i.w50{width:50%}.pnl-barra i.w55{width:55%}.pnl-barra i.w60{width:60%}.pnl-barra i.w65{width:65%}.pnl-barra i.w70{width:70%}.pnl-barra i.w75{width:75%}.pnl-barra i.w80{width:80%}.pnl-barra i.w85{width:85%}.pnl-barra i.w90{width:90%}.pnl-barra i.w95{width:95%}.pnl-barra i.w100{width:100%}
.pnl-vazio { font-size:14px; color:var(--suave); }
.pnl table { width:100%; border-collapse:collapse; font-size:14px; }
.pnl th, .pnl td { text-align:left; padding:6px 8px; border-top:1px solid var(--linha); }
.pnl th { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--suave); border-top:0; }
.pnl td:nth-child(n+2) { font-variant-numeric:tabular-nums; }
.pnl-tab { margin-top:12px; font-size:14px; }
.pnl-tab summary { cursor:pointer; color:var(--acento); font-weight:600; }
.pnl-sub { margin:-6px 0 12px; }
.pnl-percursos { list-style:none; padding:0; margin:0; max-height:640px; overflow-y:auto; }
.pnl-percursos > li { padding:12px 0; border-top:1px solid var(--linha); }
.pnl-percursos > li:first-child { border-top:0; }
.pnl-percursos > li.tem-contato { border-left:3px solid var(--acento); padding-left:12px; }
.pnl-quem { font-size:13.5px; color:var(--suave); }
.pnl-quem strong { color:var(--tinta); }
.pnl-selo { display:inline-block; background:var(--tinta); color:var(--fundo); border-radius:999px; padding:0 8px; font-weight:600; font-size:12px; }
.pnl-passos { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; }
.pnl-passos li { font-size:13px; border-radius:999px; padding:3px 10px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnl-pag { background:var(--fundo); color:var(--tinta); border:1px solid var(--linha); }
.pnl-saida { border:1px dashed var(--linha-forte); color:var(--suave); }
.pnl-saida.pnl-ct { border:1px solid var(--acento); color:var(--acento); font-weight:600; }
.pnl-passos li.pnl-seta { padding:0; color:var(--suave); }
.pnl-rodape { margin-top:14px; }
@media (max-width: 900px) { .pnl-numeros { grid-template-columns:repeat(2, 1fr); } .pnl-grade { grid-template-columns:1fr; } }
@media (max-width: 600px) { .pnl-grande { font-size:32px; } }
/* Página de privacidade */
.privacidade h2 { font-size:clamp(22px, 2vw, 27px); margin:1.6em 0 .4em; color:var(--tinta); }
.privacidade h2:first-child { margin-top:0; }
.rodape-pe a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
/* Tela de acesso (site fechado e painel): cartão de papel centralizado, no padrão do site. */
.porta-body { min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:var(--fundo); }
.porta { width:min(100%, 480px); background:linear-gradient(160deg, var(--papel-a, var(--superficie)), var(--papel-b, var(--superficie))); border:1px solid var(--linha); border-radius:16px; box-shadow:var(--sombra); padding:clamp(28px, 5vw, 44px); color:var(--texto); }
.porta h1 { font-size:clamp(30px, 6vw, 40px); color:var(--tinta); line-height:1.1; }
.porta p { margin-top:12px; font-size:17px; line-height:1.6; }
.porta .porta-erro { color:var(--acento); font-family:var(--gr); font-size:15px; font-weight:500; }
.porta form { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.porta input { flex:1 1 200px; min-width:0; min-height:46px; padding:0 14px; border-radius:10px; border:1px solid var(--linha-forte); background:var(--fundo); color:var(--tinta); font:500 16px var(--gr); }
.porta input:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }
.porta button { min-height:46px; padding:0 22px; border:0; border-radius:999px; background:var(--tinta); color:var(--fundo); font:500 16px var(--gr); cursor:pointer; }
.porta button:hover { background:var(--acento); }

/* Celular bem estreito (320 px): palavra longa de título quebra com hífen (onde o navegador sabe) e os títulos dos cartões descem um pouco, para nada encostar na borda. */
@media (max-width: 360px) { h1, h2, h3, .g { hyphens: auto; -webkit-hyphens: auto; } .cartao h3.g { font-size: 17px; } }
/* Celulares de 360 px (Galaxy A, Xiaomi) e menores: marca e espaços do cabeçalho diminuem para o botão do menu não ser espremido. */
@media (max-width: 380px) { .marca { font-size:19px; } .topo-in { gap:8px; } .chaves { flex-shrink:0; } }
@media (max-width: 340px) { .marca { font-size:16px; } .chaves { gap:0; } .chaves .idioma { padding-inline:3px; } }