/* Ponte nathrafaeli.com.br · link na bio até o Quilate entrar no ar (fase 7 do SP1).
   Marca: MARCA.md (paleta, Bodoni Moda + Jost, regras da seção 9). Sem JavaScript. */

@font-face { font-family: "Bodoni Moda"; src: url("fontes/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fontes/jost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --creme: #F6EDE6; --bordo: #5A0F1F; --rose: #D6B8B3; --vinho: #3A0A12; --champanhe: #C9A77C;
  --titulo: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --texto-fonte: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --margem: clamp(20px, 6vw, 28px);
  --coluna: 460px;
  /* Direção escolhida em 12/10/2026: vinho, a mesma linguagem do post Manifesto e do perfil */
  --fundo: var(--vinho); --texto: var(--creme); --apoio: var(--rose); --acento: var(--champanhe);
  --botao-fundo: var(--champanhe); --botao-texto: var(--vinho);
  --linha: rgba(201, 167, 124, .32); --cartao: rgba(246, 237, 230, .045);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 400 1rem/1.6 var(--texto-fonte);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 2px; }

.pagina { width: 100%; max-width: var(--coluna); margin: 0 auto; padding: 28px var(--margem) 40px; }

/* Topo das páginas internas: só a assinatura, centralizada */
.topo { display: flex; justify-content: center; padding-bottom: 24px; }
.topo img { width: 196px; }

/* Herói: retrato (ponto focal) > assinatura > título > apoio > ação.
   A foto já termina no vinho exato da página dentro da própria imagem (máscara feita no construir.py, sem
   moldura nem esfumado de CSS), então ela sangra pelas margens sem mostrar retângulo.

   PRIMEIRA TELA (regra para toda largura e toda altura): o botão de ação aparece inteiro e o começo do bloco
   seguinte "espia" na borda de baixo (--espiar), contra o falso fim de página (NN/g: "Keep major CTAs above the
   fold"; "Illusion of Completeness"). A foto é a parte elástica: --foto-h é a altura que sobra na tela útil
   (100svh, que já desconta as barras do navegador) depois do texto do herói. O heroi.js mede o texto de verdade
   (--texto-h) quando ele muda de tamanho; sem script, vale a estimativa. Limites: nunca maior que a foto
   natural (largura da tela, até 516 px) e nunca menor que --foto-min.

   Celular e tablet: ela centralizada; a assinatura entra na parte escura, da barriga para baixo (73,4% a 89,1%
   da altura da foto 1024 x 1310). Computador (1024 px ou mais): regras no bloco "Computador" no fim. */
.pagina:has(.heroi) { padding-top: 0; }
.heroi {
  --espiar: 72px;      /* margem até o bloco seguinte (32) + 40 px dele à mostra */
  /* altura do título (2 linhas x 1,04) + 14 + apoio (2 linhas de 17 px x 1,6) + 22 + botão 56, pela própria
     tipografia (bate com a medida real: 232 px em 393 de largura). O heroi.js só corrige se a medida diferir
     mais de 2 px (texto editado, outra fonte): assim não força layout na carga (medido: era tarefa longa de 196 ms). */
  --h1-fs: clamp(2.35rem, 10.5vw, 2.75rem);
  --texto-h: calc(var(--h1-fs) * 2.08 + 14px + 1.0625rem * 3.2 + 78px);
  --foto-min: 220px;
  --foto-max: calc(min(100vw, 516px) * 1310 / 1024);
  /* sobra = tela útil - espiar - texto - 16 px entre assinatura e título. A foto cumpre as duas contas:
     assinatura proporcional (47,4% da foto: topo em 73,4% + altura 15,7% = 89,1% da foto) e assinatura no
     mínimo do manual (120 px de largura = 51 px de altura, com topo em 73,4% da foto) */
  --sobra: calc(100vh - var(--espiar) - var(--texto-h) - 16px);
  --sobra: calc(100svh - var(--espiar) - var(--texto-h) - 16px);
  --foto-h: clamp(var(--foto-min), min(calc(var(--sobra) / .891), calc((var(--sobra) - 51px) / .7336)), var(--foto-max));
  --foto-w: calc(var(--foto-h) * 1024 / 1310);
  --logo-w: max(120px, calc(var(--foto-w) * .474));   /* 120 px = mínimo da assinatura vertical na tela (MARCA.md) */
  --logo-topo: calc(var(--foto-h) * .7336);
  position: relative; text-align: center;
}
/* a moldura .foto leva tamanho, recorte e o esqueleto: o WebKit não desenha ::before/::after dentro de <picture> */
.foto { position: relative; width: var(--foto-w); margin-left: calc(50% - var(--foto-w) / 2); overflow: clip; }
.retrato { display: block; }
/* altura imposta pela conta da primeira tela (nunca pela proporção do arquivo que chegou do cache) */
.retrato img { width: 100%; height: var(--foto-h); object-fit: cover; transition: opacity .35s ease; }
/* o título começa 16 px abaixo da assinatura (altura = largura x 502/1183) */
.heroi-texto { margin-top: calc(var(--logo-topo) + var(--logo-w) * .4243 + 16px - var(--foto-h)); }
.heroi-texto h1 { margin-top: 0; }
/* camadas do herói: foto (normal) < esqueleto (2) < assinatura, título, apoio e botão (3), que se sobrepõem à base da foto */
.heroi-texto > * { position: relative; z-index: 3; }
.heroi-texto .topo { position: absolute; left: 0; right: 0; top: var(--logo-topo); padding: 0; z-index: 3; }
/* o <picture> ocupa a linha toda e a logo se centraliza por margem: com largura em % do <picture> dentro do
   flex, o Safari media o <picture> pelo SVG (300 px) e deixava a logo encostada à esquerda */
.heroi-texto .topo picture { display: block; width: 100%; }
.heroi-texto .topo .brilho { width: var(--logo-w); margin-inline: auto; }
.heroi-texto .topo img { display: block; width: 100%; }
.rotulo {
  margin: 0; font-weight: 500; font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--acento);
}
h1, h2 { font-family: var(--titulo); font-weight: 500; font-variation-settings: "opsz" 18; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 10.5vw, 2.75rem); line-height: 1.04; letter-spacing: -.01em; margin-top: 22px; }
h1 span { display: block; color: var(--acento); }
.apoio { margin: 14px 0 0; font-size: 1.0625rem; color: var(--apoio); text-wrap: balance; }

.botao {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px; border-radius: 2px;
  font-weight: 500; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.botao svg { width: 20px; height: 20px; flex: none; }
.botao.principal { margin-top: 22px; background: var(--botao-fundo); color: var(--botao-texto); }
.botao.secundario { margin-top: 18px; border: 1.5px solid var(--acento); color: var(--texto); }
.botao:active { transform: scale(.985); }
@media (hover: hover) {
  .botao.principal:hover { filter: brightness(1.06); }
  .botao.secundario:hover { background: var(--cartao); }
}

/* Blocos: só a Agenda de modelos (segunda ação) vira cartão; o resto é aberto, separado por fio */
.blocos { display: grid; gap: 0; margin-top: 32px; }
.bloco { position: relative; padding: 30px 0; }
.bloco.cartao { padding: 26px 24px; margin-bottom: 14px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 2px; }
.bloco.cartao + .bloco::before { display: none; }
.bloco h2 { font-size: 1.75rem; line-height: 1.1; margin-top: 8px; }
.bloco p:not(.rotulo) { margin: 10px 0 0; color: var(--apoio); }

.servicos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.servicos li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 1.0625rem; }
.servicos li:last-child { border-bottom: 0; }


/* Rodapé */
.rodape { margin-top: 52px; display: grid; justify-items: center; gap: 14px; text-align: center; font-size: .875rem; color: var(--apoio); }
.rodape .simbolo { width: 44px; }
.rodape p { margin: 0; }
.rodape nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.rodape nav a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linha); }
.rodape .autoria { font-size: .75rem; letter-spacing: .04em; opacity: .85; }

/* Texto corrido (privacidade, erro) */
.texto { margin-top: 8px; }
.texto h1 { font-size: 2.25rem; text-align: left; }
.texto h2 { font-size: 1.375rem; margin-top: 30px; }
.texto p, .texto li { color: var(--apoio); }
.texto a { text-underline-offset: 3px; }
.voltar { display: inline-block; margin-top: 30px; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--acento); }

/* Computador (1024 px ou mais): grade de 12 colunas em 1120 px (coluna 64, calha 32). Um eixo só à esquerda,
   o início da coluna 2 (8,57%); a borda direita do conteúdo é o fim da coluna 11 (91,43%), onde termina o braço
   dela na foto. Medidas da foto larga (1120 x 656): topo do cabelo em 27%, linha dos olhos em 39,2%, ela de
   x 66% a 91%. A assinatura começa no topo do cabelo e o título na linha dos olhos. Unidades cqw = % da
   largura do herói, para tudo escalar junto entre 1024 e 1120 px. */
@media (min-width: 1024px) {
  /* primeira tela no computador: a página inteira (herói e grade) escala pela altura útil, para o botão e o
     começo dos blocos (que nascem em 93% da altura da foto = 54,59% da largura) caberem com --espiar à mostra */
  .pagina {
    --espiar: 72px;
    width: min(calc(100% - 48px), 1120px, calc((100vh - var(--espiar)) * 1.8318));
    width: min(calc(100% - 48px), 1120px, calc((100svh - var(--espiar)) * 1.8318));
    max-width: none; padding: 0 0 56px; container-type: inline-size;
  }
  .heroi { container-type: inline-size; text-align: left; }
  .foto { width: 100%; margin: 0; }
  .retrato img { height: auto; aspect-ratio: 1536 / 900; }
  .heroi-texto { position: absolute; left: 8.5714%; top: 26.98%; width: 48.57%; margin: 0; }
  .heroi-texto .topo { position: static; justify-content: flex-start; }
  .heroi-texto .topo .brilho { width: 28cqw; margin-inline: 0; --brilho-mascara: url("/assets/marca/assinatura-horizontal-heroi.svg"); }
  .heroi-texto h1 { font-size: 5.357cqw; margin-top: 3.57cqw; }
  .heroi-texto .apoio { margin-top: 2.14cqw; font-size: 1.125rem; }
  .heroi-texto .botao { display: inline-flex; margin-top: 2.86cqw; padding: 0 32px; }

  /* os blocos sobem para a base da foto, que ali já é vinho chapado (93% da altura dela); em 1024 px o botão
     termina mais perto disso, por isso não sobe mais que 4% da largura (folga medida: 38 px) */
  .blocos { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 48px; margin-top: -4cqw; padding-inline: 8.5714%; }
  .bloco, .bloco.cartao { padding-top: 28px; }
  /* a caixa sai 29 px para a esquerda (recuo interno 28 + borda 1), para o texto do cartão ficar no eixo da coluna 2 */
  .bloco.cartao { margin: 0 0 0 -29px; padding: 28px; display: flex; flex-direction: column; }
  .bloco.cartao .botao { margin-top: auto; }
  .bloco.cartao p:not(.rotulo) { margin-bottom: 24px; }
  .bloco.cartao + .bloco::before { display: block; }
  /* serviços em duas colunas: a lista fica da altura do cartão ao lado, e as bases dos dois se alinham */
  .servicos { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .servicos li { padding: 10px 0; }  /* última linha centrada no centro do botão do cartão (medido: 910) */
  .servicos li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .bloco h2 { font-size: 2rem; }

  .rodape {
    margin: 72px 8.5714% 0; padding-top: 28px; border-top: 1px solid var(--linha);
    grid-template-columns: auto 1fr auto; grid-template-areas: "simbolo local nav" "simbolo local autoria";
    justify-items: start; align-items: center; column-gap: 20px; row-gap: 4px; text-align: left;
  }
  .rodape .simbolo { grid-area: simbolo; }
  .rodape > p:not(.autoria) { grid-area: local; }
  .rodape nav { grid-area: nav; justify-self: end; justify-content: flex-end; }
  .rodape .autoria { grid-area: autoria; justify-self: end; }
}

/* ---------------------------------------------------------------------------------------------------------
   Movimento "Gel e luz" e carregamento (aprovados em 12/10/2026). Só transform, opacity e pinturas pequenas.
   Contínuos em CSS puro, pausados fora da tela (o anima.js marca .fora-da-tela por IntersectionObserver).
   Rolagem de ida e volta no anima.js (GSAP, baixado só depois que a página e a foto carregaram).
   --------------------------------------------------------------------------------------------------------- */

/* Brilho do gel: uma faixa de luz atravessa a assinatura e o N (só por cima do desenho, pela máscara) */
.brilho { position: relative; display: block; --brilho-mascara: url("/assets/marca/assinatura-vertical-heroi.svg"); }
.brilho::after {
  content: ""; display: block; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--brilho-mascara) center / 100% 100% no-repeat; mask: var(--brilho-mascara) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 246, 232, .9) 50%, transparent 58%) 130% 0 / 250% 100% no-repeat;
  animation: gel 7s ease-in-out 1.8s infinite;
}
.brilho-simbolo { display: inline-block; --brilho-mascara: url("/assets/marca/simbolo-champanhe.svg"); }
.brilho-simbolo::after { animation-delay: 3.2s; }
@keyframes gel { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } }

.botao.principal { position: relative; overflow: hidden; isolation: isolate; }
.botao.principal::after {
  content: ""; display: block; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; pointer-events: none; z-index: -1;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: gel-botao 7s ease-in-out 2.6s infinite; will-change: transform;
}
@keyframes gel-botao { 0% { transform: translateX(0); } 20%, 100% { transform: translateX(480%); } }

/* A foto respira: aproxima 3,5% em 18 s, ida e volta (propriedade scale, separada do transform do GSAP) */
.retrato img { transform-origin: 50% 36%; animation: respirar 18s ease-in-out infinite alternate; }
@keyframes respirar { from { scale: 1; } to { scale: 1.035; } }

/* Esqueleto da foto + carregamento da marca: só se a foto demorar. A silhueta aparece depois de 0,4 s e o N
   da pantera (com o brilho do gel em loop) começa a se mover depois de 1 s. São elementos de verdade, por cima
   da foto: no WebKit (medido em 12/10/2026) pseudo-elementos aqui não eram desenhados e a foto que ainda está
   chegando cobria o que estava atrás dela. Saem quando o heroi.js marca .carregou; sem script, somem aos 8 s. */
.carregando {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 17% 14% at 50% 33%, var(--esqueleto) 55%, transparent 100%),
              radial-gradient(ellipse 40% 22% at 50% 74%, var(--esqueleto) 55%, transparent 100%);
  animation: esqueleto-aparece .4s ease .4s forwards, esqueleto-some .3s ease 8s forwards;
}
.carregando-n {
  display: block; position: absolute; left: 50%; top: 50%; width: 56px; height: 58px; translate: -50% -50%;
  -webkit-mask: url("/assets/marca/simbolo-champanhe.svg") center / contain no-repeat; mask: url("/assets/marca/simbolo-champanhe.svg") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 240, 220, .95) 50%, transparent 60%) 130% 0 / 250% 100% no-repeat;
  background-color: rgba(201, 167, 124, .45);
  animation: gel-loop 1.6s ease-in-out 1s infinite;
}
@keyframes esqueleto-aparece { to { opacity: 1; } }
@keyframes esqueleto-some { to { opacity: 0; visibility: hidden; } }
@keyframes gel-loop { 0% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }
.foto.carregou .carregando { display: none; }
.foto.esperando img { opacity: 0; }

/* Fios dos blocos: o anima.js desenha da esquerda para a direita com a rolagem (--traco de 0 a 1) */
.bloco::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linha); transform-origin: left center; transform: scaleX(var(--traco, 1)); }
.bloco.cartao::before { display: none; }

/* Gotas de esmalte da lista: o anel já está lá; a cor enche com a rolagem (--cor de 0 a 1, com respiro de gota) */
.gota { position: relative; flex: none; width: 9px; height: 9px; border: 1px solid var(--acento); border-radius: 50%; }
.gota::after { content: ""; display: block; position: absolute; inset: 1px; border-radius: 50%; background: var(--acento); transform: scale(var(--cor, 1)); }

/* Computador: a silhueta e o N do carregamento ficam onde ela aparece na foto larga (à direita) */
@media (min-width: 1024px) {
  .carregando { background: radial-gradient(ellipse 7% 14% at 79% 36%, var(--esqueleto) 55%, transparent 100%), radial-gradient(ellipse 16% 22% at 79% 82%, var(--esqueleto) 55%, transparent 100%); }
  .carregando-n { left: 79%; top: 52%; }
  .retrato img { transform-origin: 79% 40%; }
}

/* Fora da tela, nada contínuo roda */
.fora-da-tela .brilho::after, .fora-da-tela.brilho::after, .fora-da-tela .botao.principal::after, .fora-da-tela .retrato img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
  .brilho::after, .botao.principal::after, .retrato img { animation: none; }
  .carregando-n { animation: none; }
}