/* Componentes compartilhados (trilho, menu, rodapé, revelação) + página inicial.
   As páginas internas trazem o próprio CSS em estilo/paginas/<pagina>.css. */

/* ---------- trilho escuro (Mira) ---------- */
.trilho { display: none; }
@media (min-width: 900px) {
  .trilho { position: fixed; z-index: 50; left: 6px; top: 6px; bottom: 6px; width: calc(var(--trilho) - 10px); display: flex; flex-direction: column;
    justify-content: space-between; align-items: center; padding-block: 12px; background: var(--tinta); border-radius: 8px; color: var(--creme); }
  .trilho-menu { --xc: 5.25px; width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  .trilho-menu span { background: var(--creme); border-radius: 1px; transition: transform .4s var(--ease); }
  .trilho-menu:hover span:nth-child(1) { transform: translate(-1px, -1px); } .trilho-menu:hover span:nth-child(4) { transform: translate(1px, 1px); }
  .trilho-pe { display: grid; gap: 14px; justify-items: center; }
  .trilho-ast { width: 20px; height: auto; opacity: .9; transition: transform .8s var(--ease); }
  .trilho:hover .trilho-ast { transform: rotate(90deg); }
  .trilho-lingua { font-size: 10px; font-weight: 700; letter-spacing: .04em; border: 1px solid var(--creme-50); border-radius: 4px; padding: 3px 4px; }
}

/* ---------- painel do menu (Mira 8.4): sai de trás da coluna escura no hover, com véu ---------- */
.veu { position: fixed; inset: 0; z-index: 45; background: rgb(31, 31, 31); opacity: 0; pointer-events: none; transition: opacity .5s var(--e-padrao); }
.veu.aberto { opacity: .85; pointer-events: auto; transition-duration: .6s; }
.trilho-painel { display: none; }
@media (min-width: 900px) {
  .trilho-painel { position: fixed; z-index: 49; left: 6px; top: 6px; bottom: 6px; width: 493px; display: grid; grid-template-rows: 1fr auto; padding: 22px 34px 26px 74px;
    background: var(--tinta); color: var(--creme); border-radius: 8px; transform: translateX(-100%); visibility: hidden;
    transition: transform .4s var(--e-mira), visibility 0s .4s; }
  .trilho-painel.aberto { transform: none; visibility: visible; transition: transform .4s var(--e-mira); }
  .trilho-painel nav { display: grid; align-content: center; gap: 2px; }
  .trilho-painel nav a { width: max-content; font-size: 56px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
  .trilho-painel nav a sup { font-size: .26em; color: var(--laranja); vertical-align: top; margin-left: .12em; }
  .trilho-painel .t-micro { color: var(--creme-50); }
  .trilho-painel-pe { display: grid; gap: 14px; }
  .trilho-painel-pe a { width: max-content; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: opacity .3s var(--e-padrao); }
  .trilho-painel-pe a:hover { opacity: .5; }
  .trilho.aberto .trilho-menu { transform: rotate(180deg); }
  .trilho-menu { transition: transform .4s var(--e-mira); }
  .trilho.aberto .trilho-menu span:nth-child(1) { transform: translate(var(--xc), var(--xc)) rotate(45deg) scale(2.3, .32); }
  .trilho.aberto .trilho-menu span:nth-child(4) { transform: translate(calc(-1 * var(--xc)), calc(-1 * var(--xc))) rotate(-45deg) scale(2.3, .32); }
  .trilho.aberto .trilho-menu span:nth-child(2), .trilho.aberto .trilho-menu span:nth-child(3) { transform: scale(0); }
  .menu-cheio { display: none !important; }
}
.menu-cheio { position: fixed; z-index: 65; top: 6px; left: 6px; right: 6px; height: min(494px, calc(100svh - 12px)); display: grid; align-content: space-between;
  padding: 80px 20px 22px; background: var(--tinta); color: var(--creme); border-radius: 12px;
  clip-path: inset(0 0 calc(100% - 52px) 0 round 10px); visibility: hidden; transition: clip-path .4s var(--e-mira), visibility 0s .4s; }
.menu-cheio.aberto { clip-path: inset(0 round 12px); visibility: visible; transition: clip-path .4s var(--e-mira); }
.menu-cheio nav { display: grid; gap: 2px; }
.menu-cheio nav a { width: max-content; font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.menu-cheio sup { font-size: .26em; color: var(--laranja); vertical-align: top; margin-left: .12em; }
.menu-cheio .t-micro { display: flex; justify-content: space-between; gap: 12px; color: var(--creme-70); }
body.menu-aberto { overflow: hidden; }

/* ---------- menu (4 colunas, como no Mira) ---------- */
.cabecalho { position: relative; z-index: 5; padding: 18px var(--g) 0; }
.menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.menu-logo img { height: 18px; width: auto; }
.menu .so-escuro { display: none; }
.no-escuro .menu .so-escuro { display: block; }
.no-escuro .menu .so-claro { display: none; }
.menu-item { position: relative; width: max-content; }
.menu-item sup { color: var(--laranja); font-size: .7em; margin-left: .15em; }
.menu-item[aria-current] { color: var(--laranja); }
.menu-fim { justify-self: end; }
/* ---------- barra do celular (Mira, seção 9): presa no topo, logo à esquerda, 4 quadradinhos à direita ---------- */
.barra-celular { display: none; }
@media (max-width: 899px) {
  .barra-celular { position: fixed; z-index: 70; top: 6px; left: 6px; right: 6px; height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
    background: var(--tinta); color: var(--creme); border-radius: 10px; }
  .barra-celular-logo img { height: 18px; width: auto; }
  .cabecalho { display: none; }               /* no celular os menus das páginas dão lugar à barra */
  body:not(.inicio) .pagina { padding-top: 64px; }
  .menu-celular { --xc: 5.75px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 20px; height: 20px; transition: transform .4s var(--e-mira); }
  .menu-celular span { background: var(--creme); border-radius: 1.5px; transition: transform .4s var(--e-mira); }
  .menu-celular[aria-expanded="true"] { transform: rotate(180deg); }
  .menu-celular[aria-expanded="true"] span:nth-child(1) { transform: translate(var(--xc), var(--xc)) rotate(45deg) scale(2.3, .32); }
  .menu-celular[aria-expanded="true"] span:nth-child(4) { transform: translate(calc(-1 * var(--xc)), calc(-1 * var(--xc))) rotate(-45deg) scale(2.3, .32); }
  .menu-celular[aria-expanded="true"] span:nth-child(2), .menu-celular[aria-expanded="true"] span:nth-child(3) { transform: scale(0); }
}

/* ---------- revelação do Mira (animacoes.md 0.3 e 0.4): sem máscara, sobe poucos px e aparece; o visível é o padrão ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* "aparecer" de bloco: opacity com a mola M1 (1168 ms); --y opcional pra quem sobe junto */
  .js .revela:not(.visto) { opacity: 0; transform: translateY(var(--y, 0px)); }
  .js .revela { transition: opacity 1168ms var(--m1), transform 1168ms var(--m1); transition-delay: var(--atraso, 0s); }
  /* texto linha a linha: TL-1 é o padrão; .tl-2 nos títulos de seção; .tl-3 no apoio ao lado do título */
  .js .revela-linhas .linha { display: block; }
  .js .revela-linhas .linha > span { display: inline-block; transition: opacity var(--tl-dur, 1.1s) var(--e-texto), transform var(--tl-dur, 1.1s) var(--e-texto);
    transition-delay: calc(var(--tl-ini, .2s) + var(--i, 0) * var(--tl-passo, .1s) + var(--atraso, 0s)); }
  .js .revela-linhas:not(.visto) .linha > span { opacity: .001; transform: translateY(var(--tl-y, 15px)); }
  .tl-2 { --tl-y: 10px; --tl-passo: .2s; }
  .tl-3 { --tl-dur: .8s; --tl-ini: .5s; }
  /* palavra a palavra: TP-1 (texto pequeno); .tp-2 nos cases e depoimentos */
  .js .revela-palavras .pal { display: inline-block; transition: opacity .6s var(--e-texto), transform .6s var(--e-texto);
    transition-delay: calc(var(--tp-ini, .5s) + var(--j, 0) * .02s + var(--atraso, 0s)); }
  .js .revela-palavras:not(.visto) .pal { opacity: .001; transform: translateY(var(--tp-y, 5px)); }
  .tp-2 { --tp-y: 2px; --tp-ini: .2s; }
}

/* ================= PÁGINA INICIAL ================= */

/* ---------- 1. topo ---------- */
/* Mira 1.1: o topo fica preso (dentro do bloco topo + sobre) e o Sobre sobe por cima dele; 3 px de respiro e cantos de 12 */
.topo { position: relative; height: 100svh; min-height: 620px; padding: 6px 6px 0; }
.topo-cartao { position: relative; height: 100%; border-radius: 12px; overflow: clip; background: var(--tinta); color: var(--creme); }
.topo-nome, .topo-por-cima, .topo-pe { translate: 0 var(--par, 0px); }
@media (min-width: 900px) {
  .topo { position: sticky; top: 0; z-index: 0; padding: 6px 6px 6px 0; }
  .topo-cartao { transform-origin: 50% 50%; will-change: transform, opacity; }
  .topo-sobre > .sobre { position: relative; z-index: 1; background: var(--creme); }
}
.topo-foto, .topo-recorte { position: absolute; inset: 0; }
/* a foto fica mais alta que o cartão (--zoom) e presa pela base: ele sobe no quadro; o nome segue o cabelo pelo inicio.js */
.topo-foto img, .topo-recorte img { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% * var(--zoom, 1)); max-width: none; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 900px) { .topo { --zoom: 1; } }   /* 06/10: foto em plano aberto, sem ampliar (ele quer ver o fundo) */
.topo-recorte { z-index: 3; pointer-events: none; }
.topo-sombra { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(21,20,19,.18), rgba(21,20,19,0) 30%); }
.topo .cabecalho { position: absolute; inset: 0 0 auto; z-index: 6; padding-top: 20px; }
.topo-nome { position: absolute; z-index: 2; left: 0; right: 0; margin: 0; text-align: center; white-space: nowrap;
  top: var(--nome-topo, 43.5%); transform: translateY(-100%);
  font-size: var(--nome-fs, 12.6vw); font-weight: 800; letter-spacing: -0.06em; line-height: .8; color: var(--creme); }
.topo-nome-l { display: inline-block; }
.topo-por-cima { position: absolute; z-index: 4; left: var(--pc-x, 70%); top: var(--pc-y, 30%); font-family: var(--serifa); font-style: italic; font-weight: 400; letter-spacing: 0;
  font-size: calc(var(--nome-fs, 12vw) * .5); line-height: 1; color: var(--laranja); transform: translate(-100%, -58%);
  white-space: nowrap; pointer-events: none; }
/* miniaturas do Mira (1.1c): 90×50, raio 8, 4 px entre elas, 30 px da borda; apagadas a .3, a escolhida acende e anda 8 px */
.topo-miniaturas { position: absolute; z-index: 6; right: 30px; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.topo-miniaturas img { display: block; width: 90px; height: 50px; object-fit: cover; border-radius: 8px; opacity: .3; transition: opacity .3s ease, transform .25s ease; }
.topo-miniaturas li:first-child img, .topo-miniaturas a:hover img, .topo-miniaturas a:focus-visible img { opacity: 1; }
.topo-miniaturas a:hover img, .topo-miniaturas a:focus-visible img { transform: translateX(8px); }
.topo-miniaturas:hover li:first-child a:not(:hover) img { opacity: .3; }
.topo-pe { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 0 var(--g) 22px; display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, .7fr) auto; gap: 24px; align-items: end; }
.topo-manifesto { margin: 0; max-width: 44ch; font-size: clamp(14px, 1.15vw, 18px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.topo-dado { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.topo-dado dd { margin: 0; line-height: 1.35; }
.topo-cta { justify-self: end; display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 3px 16px 3px 3px;
  background: var(--laranja); color: var(--tinta); border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
  transition: transform .56s var(--e-mira), border-radius .56s var(--e-mira); }
/* o quadrado do ícone acompanha o canto do botão: sempre 3 px menor (o respiro), pra ficarem harmônicos (Mira 8.3) */
.cta-icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 1px; background: var(--tinta); transition: border-radius .56s var(--e-mira); }
.cta-icone img { width: 16px; height: 16px; transition: transform .8s var(--e-mira); }
.cta-seta { width: 13px; height: 13px; margin-left: auto; transition: transform .56s var(--e-mira); }
.topo-cta:hover, .topo-cta:focus-visible { transform: scale(.95); border-radius: 16px; }
.topo-cta:hover .cta-icone, .topo-cta:focus-visible .cta-icone { border-radius: 13px; }
.topo-cta:hover .cta-icone img, .topo-cta:focus-visible .cta-icone img { transform: rotate(90deg); }
.topo-cta:hover .cta-seta, .topo-cta:focus-visible .cta-seta { transform: translateX(3px); }
@media (max-width: 899px) {
  .topo { height: 92svh; min-height: 640px; padding: 6px 6px 0; }
  .topo-cartao { border-radius: 12px; will-change: auto; transform: none; }
  .topo-nome { font-size: var(--nome-fs, 23vw); white-space: normal; line-height: .82; }
  .topo-nome-l { display: block; }
  .topo-por-cima { font-size: calc(var(--nome-fs, 23vw) * .56); }
  .topo-miniaturas { display: none; }
  .topo-pe { grid-template-columns: 1fr 1fr; gap: 16px 12px; padding-bottom: 20px; }
  .topo-manifesto { grid-column: 1 / -1; }
  .topo-cta { grid-column: 1 / -1; justify-self: stretch; height: 46px; }
}

/* ---------- 2. sobre ---------- */
.sobre .grade { align-items: start; }
.sobre-rotulo { grid-column: 1 / span 3; padding-top: .5em; }
.sobre-frase { grid-column: 4 / -1; text-indent: 22%; }
.revela-linhas .linha, .revela-linhas .linha > span { text-indent: 0; }
.sobre-frase .linha:first-child { text-indent: 22%; }
.sobre-baixo { margin-top: clamp(56px, 7vw, 110px); }
.sobre-cartao { grid-column: 1 / span 3; position: relative; margin: 0; }
.sobre-cartao picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.sobre-ast { position: absolute; left: 12px; top: 12px; width: 22px; height: auto; }
.sobre-assinatura { position: absolute; width: 150%; max-width: none; right: -62%; bottom: 14%; height: auto; transform: rotate(-6deg); pointer-events: none; }
.sobre-cartao figcaption { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
.sobre-filosofia { grid-column: 4 / span 2; }
.sobre-texto { grid-column: 8 / -1; display: grid; gap: 22px; align-content: start; }
.sobre-citacao { margin: 0; text-transform: none; }
.sobre-link { justify-self: end; margin-top: 10px; }
@media (max-width: 899px) {
  .sobre-rotulo, .sobre-frase, .sobre-cartao, .sobre-filosofia, .sobre-texto { grid-column: 1 / -1; }
  .sobre-frase { text-indent: 0; margin-top: 18px; }
  .sobre-cartao { width: 62%; }
  .sobre-assinatura { width: 112%; right: -56%; }
  .sobre-filosofia { margin-top: 28px; }
}

/* ---------- rodapé (logo gigante; grão e ✱ desfocado no estilo da capa do Behance) ---------- */
.rodape { position: relative; overflow: clip; background: var(--creme-2); padding: 26px var(--g) 22px; margin-top: 6px; }
.rodape-fundo { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(60% 70% at 85% 30%, rgba(255,90,54,.28), rgba(255,90,54,0) 70%); }
.rodape-fundo::after { content: ""; position: absolute; inset: 0; background-image: var(--grao); opacity: .35; mix-blend-mode: multiply; }
.rodape-menu { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.rodape-menu img { height: 18px; width: auto; }
.rodape-menu sup { color: var(--laranja); font-size: .7em; }
.rodape-menu a:last-child { justify-self: end; }
.rodape-meio { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: clamp(70px, 9vw, 140px) 40px; }
.rodape-ano { grid-column: 4 / span 3; color: var(--tinta-60); margin-bottom: 18px; }
.rodape-nome { grid-column: 4 / -1; grid-row: 2; margin: 0; font-size: clamp(64px, 10.5vw, 190px); font-weight: 800; letter-spacing: -0.06em; line-height: .82; }
.rodape-nome span { display: block; position: relative; width: max-content; }
.rodape-ast { position: absolute; right: -.42em; top: -.05em; width: .38em; height: auto; transition: transform 1.2s var(--ease); }
.rodape-nome:hover .rodape-ast { transform: rotate(120deg); }
.rodape-por-cima { position: absolute; right: .04em; bottom: .02em; z-index: 1; font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: .42em; letter-spacing: 0;
  line-height: 1; color: var(--laranja); pointer-events: none; }
.rodape-frase { text-indent: 22%; }
.rodape-cta { grid-column: 8 / span 3; justify-self: end; }
.rodape-frase { grid-column: 4 / span 6; margin: 40px 0 0; font-size: clamp(15px, 1.2vw, 19px); font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; }
.rodape-redes { grid-column: 4 / span 6; display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 26px; }
.rodape-redes .t-corpo { text-transform: none; font-weight: 500; }
.rodape-pe { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 12px; }
.rodape-pe > .t-micro:first-child { grid-column: 3; color: var(--tinta-60); }
.rodape-legal { grid-column: 4 / span 3; line-height: 1.6; }
.rodape-topo { grid-column: 6 / span 2; }
.credito { grid-column: 11 / -1; justify-self: end; display: inline-flex; align-items: center; gap: .55em; font-size: 12px; white-space: nowrap; }
.credito img { height: 11px; width: auto; }
@media (max-width: 899px) {
  .rodape-menu { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rodape-menu a:last-child { justify-self: start; }
  .rodape-ano, .rodape-nome, .rodape-frase, .rodape-redes { grid-column: 1 / -1; }
  .rodape-pe { grid-template-columns: 1fr 1fr; }
  .rodape-pe > *, .rodape-legal, .rodape-topo, .credito { grid-column: auto; justify-self: start; }
  .rodape-pe > .t-micro:first-child { display: none; }
  .rodape-pe > .rodape-cta { grid-column: 1 / -1; justify-self: stretch; order: -1; margin-bottom: 18px; }
}

/* grão (SVG feTurbulence), usado nos fundos no estilo da capa do Behance */
:root { --grao: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }

/* ---------- cursor do Mira (8.6): só com mouse; aparece sobre [data-cursor] ---------- */
.cursor { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cursor { display: block; position: fixed; z-index: 90; left: 0; top: 0; width: 75px; height: 75px; margin-left: -37.5px; pointer-events: none; mix-blend-mode: exclusion; }
  .cursor-bola { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 100px; background: #fff; color: #000; transform: scale(0); transition: transform 422ms var(--m2);
    font-size: 10px; font-weight: 700; line-height: 1.05; text-align: center; text-transform: uppercase; letter-spacing: .01em; }
  .cursor.ativo .cursor-bola { transform: scale(1); }
  .cursor-texto { max-width: 50px; transition: opacity .56s var(--e-mira); }
}

/* ---------- abertura (Mira 1.0) ---------- */
.abertura { display: none; }
.js .abertura { display: block; position: fixed; inset: 0; z-index: 9999; pointer-events: none; color: var(--creme);
  animation: abertura-some 0s 6s forwards; }  /* reserva: se o script falhar, some sozinha */
@keyframes abertura-some { to { visibility: hidden; } }
/* duas camadas: .abertura-capa (laranja lisa, cobre desde o 1º quadro) e .abertura-furo (laranja com o furo no formato do ✱).
   O furo é montado antes da revelação, com a capa lisa por baixo: se a máscara demorar a pintar (no celular a camada fica
   transparente até a imagem da máscara estar pronta), a lisa continua cobrindo. A lisa só sai quando o furo começa a abrir.
   Sem grão na abertura: ele entrava depois e escurecia o laranja, parecia uma piscada. */
.abertura-capa, .abertura-furo { position: absolute; inset: 0; background: var(--laranja); }
.abertura-furo { display: none;
  -webkit-mask: url(../marca/ast-silhueta.png) center / var(--furo, 0px) auto no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: url(../marca/ast-silhueta.png) center / var(--furo, 0px) auto no-repeat exclude, linear-gradient(#000 0 0); }
.abertura.furo-pronto .abertura-furo { display: block; }
.abertura.furando .abertura-capa { visibility: hidden; }
.abertura-ast { position: absolute; left: 50%; top: 50%; width: 64px; height: auto; margin: -32px 0 0 -32px;
  animation: abertura-ast .8s var(--e-mira) both; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes abertura-ast { from { opacity: 0; transform: translateY(150px) scale(1.05); } }
.abertura.segura .abertura-ast { transform: scale(1.03); }
.abertura-conta { position: absolute; left: 0; right: 0; bottom: 28px; margin: 0; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; transition: opacity .25s ease; }
.abertura-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--creme); transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); transition: opacity .25s ease; }
.abertura.segura .abertura-conta, .abertura.segura .abertura-barra { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .abertura { display: none; } }