/* Componentes compartilhados — fora de camada, prevalecem sobre o CSS das páginas (camada "page") */

/* Links: uma única gramática — texto + "↗", sublinhado no hover, seta sem transformação */
#cinema .beat .cinema-link,#ending .links a,.devp-more,.devp-end a,.textlink,.endlinks a,.related a,.case-end a{text-decoration:none;border-bottom:0;padding-bottom:0;opacity:1;transition:none}
#cinema .beat .cinema-link:hover,#ending .links a:hover,.devp-more:hover,.devp-end a:hover,.textlink:hover,.endlinks a:hover,.related a:hover,.case-end a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;opacity:1}
.devp-more span,.endlinks a span,.study .arrow{transform:none}
/* Linhas de lista com link (estudos): sem deslocamento; o nome ganha o sublinhado */
.study,.study:hover,.publication,.publication:hover,.devp-item,.devp-item:hover{padding-left:0;transition:none}
.study:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* Kicker padrão também dentro do bloco "Quem conduz" da Consultoria */
.narrative .kicker{font-family:var(--font-sans);font-size:var(--t-kicker);font-weight:400;line-height:1.6;letter-spacing:.16em;color:var(--graphite);margin:0 0 var(--s-5)}

/* Avisos de protótipo: estilo único, discreto, no fluxo da página */
.proto-note{position:static;display:block;background:none;border:0;box-shadow:none;font-family:var(--font-sans);font-size:var(--micro);font-weight:400;line-height:1.6;letter-spacing:.06em;color:var(--graphite)}
.stub.proto-note{padding-left:0;padding-right:0}
body>.proto-note{width:var(--container);margin:0 auto;padding:16px 0 24px}
/* Aviso de demonstração do Painel no mesmo estilo */
.preview{display:block;background:none;border:0;padding:0;margin:0 0 var(--s-4);font-family:var(--font-sans);font-size:var(--t-kicker);line-height:1.6;letter-spacing:.06em;color:var(--graphite)}

/* ——— Links: texto + seta, sem filete em repouso, sublinhado no hover ——— */
.return,.ct-link,.demo-link,.textlink,#ending .links a,.case-end a,.related a,#cinema .beat .cinema-link{border-bottom:0;padding-bottom:0;text-transform:none;letter-spacing:0;text-decoration:none}
.return,.ct-link,.textlink,.case-end a,.related a{font-size:14px}
.demo-link{font-size:13px;color:var(--graphite)}
.return:hover,.ct-link:hover,.demo-link:hover,.case-end a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ——— Container comum: 1370 px, margens 56 / 32 / 24 ——— */
.shell,.wrap,.in-wrap{width:var(--container);max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.devp-feature .devp-feature-head{width:auto}

/* ——— Grid de 12 colunas: cabeçalho de seção em trilho (1–4 / 5–12) ——— */
.section-grid,.cols,.casebody{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--s-4)}
.section-grid>:first-child,.cols>:first-child,.casebody>:first-child{grid-column:1/span 4}
.section-grid>:nth-child(n+2),.cols>:nth-child(n+2),.casebody>:nth-child(n+2){grid-column:5/-1}
.case-fields .row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.case-fields .row>:first-child{grid-column:1/span 4}
.case-fields .row>:nth-child(n+2){grid-column:5/-1}
/* Plataforma: abertura em 7 + 5 colunas, alinhada pelo topo */
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
.hero-grid>:first-child{grid-column:1/span 7}
.hero-grid>:last-child{grid-column:8/-1;padding-top:calc(var(--t-kicker) * 1.6 + var(--kicker-gap) + 10px)}
@media (max-width:800px){
 .section-grid>:nth-child(n),.cols>:nth-child(n),.casebody>:nth-child(n),.case-fields .row>:nth-child(n),.hero-grid>:nth-child(n){grid-column:1/-1}
 .hero-grid{row-gap:var(--s-6)}.hero-grid>:last-child{padding-top:0}
 .case-fields .row{row-gap:var(--s-2)}
}

/* A Alpine: linha de dados do território quebra em telas estreitas */
.territory .smallline{flex-wrap:wrap;row-gap:var(--s-2)}

/* ——— Ritmo vertical ——— */
.hero{padding-top:var(--hero-top);padding-bottom:var(--hero-bottom)}
.hero h1{margin-top:var(--kicker-gap)}
.hero .eyebrow{margin-bottom:0}
.hero p.lead,.hero div.lead,.hero .intro{margin-top:var(--lede-gap)}
.in-hero,.casehero{padding-top:var(--hero-top);padding-bottom:var(--s-8)}
.in-hero h1,.casehero h1{margin-top:var(--kicker-gap)}
.in-lead{margin-top:var(--lede-gap)}
.section,.territory{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.statement,.narrative,.tech-band{padding-top:var(--section-y-lg);padding-bottom:var(--section-y-lg)}
.founder{padding-top:var(--section-y);padding-bottom:var(--section-y-lg)}
.devp-end{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section-title{margin-bottom:var(--s-7)}
.section .kicker{margin-bottom:var(--s-4)}
.hero .lower{margin-top:var(--s-8)}
@media (max-width:600px){
 .in-hero,.casehero{padding-bottom:var(--s-7)}
 .section-title{margin-bottom:var(--s-6)}
 .hero .lower{margin-top:var(--s-7)}
}

/* ——— Cores e filetes só da paleta ——— */
.three p,.method p,.devp-desc,.devp-feature-side>p:not(.eyebrow),.publication .desc,.article-sub,.devp-detail-intro aside,.reading,.portal-story .lead,.side button{color:var(--graphite)}
.placeholder,.side .arrow{color:var(--alpine-ink)}
.article-meta,.essence-list article>span{color:var(--stone)}
.three article,.pillar,.geo-block{border-top-color:var(--mist)}
.essence-list article{border-color:var(--mist)}
.reading blockquote{border-left-color:var(--mist)}
.essence{background:var(--paper)}
.side button.sel{background:transparent}

/* ——— Revelação progressiva (reveal.js): opacidade e translateY 16 px, 700 ms ——— */
@media (prefers-reduced-motion:no-preference){
 html.js-reveal [data-reveal=""]{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
 html.js-reveal [data-reveal=""].is-in{opacity:1;transform:none}
}

/* ——— V2.1: correções técnicas (ver melhorias-v2.1/RELATORIO-MELHORIAS-V2.1.md) ——— */

/* Link "Ir ao conteúdo": oculto até receber foco pelo teclado; igual em todas as páginas */
.skip{position:absolute;left:-9999px;top:auto;color:var(--alpine-ink)}
.skip:focus{position:fixed;left:var(--s-2);top:var(--s-2);z-index:1001;background:var(--gallery-white);color:var(--alpine-ink);padding:12px 16px;font:400 14px/1.4 var(--font-sans);text-decoration:underline;text-underline-offset:4px;outline:2px solid var(--alpine-ink);outline-offset:2px}
main:focus{outline:none}

/* Kicker da abertura: sem a margem padrão do <p> (deslocava o H1 em 11 px em Empreendimentos e Estudos)
   e como bloco onde é um <span> (Publicações), para a mesma altura de linha das demais páginas */
.hero .eyebrow,.casehero .eyebrow{margin-top:0}
.hero .kicker{display:block}

/* Estudos: ritmo vertical nos tokens (antes 105/105, 45/125 e 0/120 px, fora da escala de 8 px) */
.casebody{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.case-fields{padding-top:var(--s-6);padding-bottom:var(--section-y)}
.case-end{padding-bottom:var(--section-y)}

/* Modelo de artigo: abertura e leitura nos tokens (antes 110/50, 85/110 e 35/85 px) */
.article-head{padding-top:var(--hero-top)}
.reading{margin-top:var(--s-8);margin-bottom:var(--section-y)}
.related{padding-top:var(--s-6);padding-bottom:var(--s-8)}

/* Empreendimentos até 850 px: o .wrap genérico (acima) zerava o padding lateral e centralizava a ficha
   (texto a 104 px da borda em 768 px). A ficha volta à margem do site. */
@media (max-width:850px){
 .devp-feature .devp-feature-head,.devp-feature.alternate .devp-feature-head{margin-left:0;margin-right:0;width:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
}

/* Stone só a partir de 12 px (Brand Brain, colors): microtextos de 11 px em Graphite */
/* Índice da Plataforma: o número sai de Stone para Graphite e o rótulo sobe para Alpine Ink, mantendo os dois tons */
.chapter-nav a{color:var(--alpine-ink)}
.chapter-nav span,.seq-row .num,.question small,.asset small,.in-meta,.in-meta .pending,.doc-num,.meta,.index-head span,.metric small,.blockhead span,.side h2,.tag{color:var(--graphite)}

/* Fundo de carregamento das fotografias (A Alpine) na paleta: Paper em vez de #E4E3DF/#DADCDA */
.photo{background-color:var(--paper)}