/* =========================================================================
   Rubia Alyne Fotografia — folha de estilo unica do site definitivo.

   Base: direcao A (Editorial escuro), escolhida pela proprietaria em
   2026-09-10 (DEC-005). As correcoes de acessibilidade e os tokens vem da
   critique dual-agent do Impeccable feita sobre a A (DEC-012): fonte trocada
   de Inter para Jost (a marca real usa geometrica fina, DEC-013), foco visivel
   por teclado, legendas com fundo opaco (o gradiente antigo derrubava o
   contraste a 1,77:1), alvo de toque minimo de 44px.
   ========================================================================= */

:root{
  --ink:#15211F; --ink-2:#1B2A27; --ink-3:#0F1917; --cream:#F2EFE6; --gold:#E0BA73;
  --line:rgba(242,239,230,.14); --muted:rgba(242,239,230,.62);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --sans:'Jost',-apple-system,'Segoe UI',sans-serif;
  --tap:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* height:auto e obrigatorio junto com max-width. Sem ele, quando a largura
   encolhe para caber no espaco, o navegador mantem a altura declarada no
   atributo height do HTML e a foto estica na vertical. Foi o que aconteceu
   com o retrato da secao Sobre: 1536x2304 no atributo, largura reduzida a
   ~420px na coluna, altura presa em 2304. */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:400}
.label-mut{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400}
/* Frase inteira em caixa alta com tracking, acima de ~31 caracteres, fica
   dificil de ler (perde o formato da palavra). Para textos mais longos do
   que um rotulo curto, cai para caixa normal, sem tracking. */
.label.long,.label-mut.long{text-transform:none;letter-spacing:normal;font-family:var(--sans);font-size:14px;font-weight:300}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.08}
em{font-style:italic;color:var(--gold)}

/* -------------------------------------------------------------- header */
header{position:sticky;top:0;z-index:50;background:rgba(21,33,31,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* O header e sticky (65px medido). Sem isso, pular por ancora (#ensaios,
   #negocio, #trabalhos, #moving...) para uma secao encosta o titulo dela
   embaixo do header, coberto. Vale para qualquer secao com id, nao so as
   duas que a proprietaria pediu -- as ancoras internas de Empresarial e
   Aniversario tinham o mesmo problema, so que ninguem tinha reparado. */
section[id]{scroll-margin-top:80px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
/* flex-shrink:0 nos dois: a marca e um item flexivel dentro da barra, e
   quando o menu ficou com cinco itens o espaco apertou e o logo foi
   comprimido na horizontal, deformando a marca. Altura manda, largura
   acompanha, e nada encolhe. */
.brand-lock{display:flex;align-items:center;gap:10px;min-height:var(--tap);flex-shrink:0}
.brand-lock img{height:30px;width:auto;flex-shrink:0}
nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
nav a{font-size:14.5px;text-decoration:none;color:var(--muted);transition:color .2s;min-height:var(--tap);display:inline-flex;align-items:center}
/* "page" = a pagina em que voce esta; "true" = a secao em que voce esta. O item
   "Ensaios" das paginas de ensaio leva para a lista de ensaios da home, outra
   pagina, entao usa "true": marcar "page" num link que vai para outro lugar faria
   o leitor de tela dizer "pagina atual" para um link que sai da pagina. */
nav a:hover,nav a[aria-current="page"],nav a[aria-current="true"]{color:var(--gold)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:10px 14px;cursor:pointer;min-height:var(--tap)}
.btn-wa{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:10px 18px;min-height:var(--tap);display:inline-flex;align-items:center;text-decoration:none;transition:opacity .2s}
.btn-wa:hover{opacity:.85}

/* secundaria: troca entre os 6 ensaios */
.seg{border-bottom:1px solid var(--line);background:var(--ink-3)}
.seg-in{display:flex;overflow-x:auto;scrollbar-width:none}
.seg-in::-webkit-scrollbar{display:none}
.seg a{flex:0 0 auto;padding:0 18px;min-height:var(--tap);display:inline-flex;align-items:center;
  font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.seg a:hover{color:var(--cream)}
.seg a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

/* ----------------------------------------------------------------- hero */
.hero{position:relative}
.hero-img{width:100%;height:min(78vh,680px);object-fit:cover;object-position:center 28%}
/* Ajuste de enquadramento por foto. O corte padrao de 28% serve para
   retrato em pe, mas nao para foto feita de cima: na gestante-01 a modelo
   esta deitada com a cabeca na base do quadro, e 28% cai nos joelhos.
   Na foto, a barriga fica a ~50% da altura e os olhos a ~69%. O corte em
   64% e o ponto que cabe os dois na mesma faixa visivel, em tela larga e
   em tela estreita. */
.hero-img.foco-barriga-e-rosto{object-position:center 64%}
/* Casal: a foto e vertical (872x1308) num hero deitado, entao o object-fit
   amplia 1,56x e sobram 1.480px de altura para cortar. Com os 28% padrao a
   janela visivel comeca no y=266 da foto, e a cabeca da modelo, que vai de
   y=170 a y=300, entra cortada -- a proprietaria apontou isso.
   Em 16% a janela comeca no y=152 e os dois rostos cabem inteiros. */
.hero-img.foco-dois-rostos{object-position:center 16%}
/* Casamento: a foto e vertical (1248x1872) num hero raso, entao o cover corta
   quase tudo e sobra uma faixa fina. Com os 28% padrao a faixa caia na parede
   atras deles e mostrava so meia cabeca do noivo -- a proprietaria apontou e
   mandou a parte que quer: os dois rostos. Medido nesta foto: os rostos ficam
   entre 37% e 45% da altura. Em 46% a faixa visivel comeca logo acima das
   cabecas, os dois rostos aparecem inteiros no terco de cima e o titulo, que
   fica na base do hero, cai sobre o vestido e o terno, sem cobrir ninguem.
   Conferido em janela de 620px e de 900px de altura, e no celular. */
.hero-img.foco-noivos{object-position:center 46%}
/* Posicionamento: rosto dela fica a ~25% da altura da foto; 18% deixa o rosto no terco de
   cima da faixa e o titulo (na base do hero) cai sobre a mesa. */
.hero-img.foco-profissional{object-position:center 18%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,33,31,.55) 0%,rgba(21,33,31,0) 32%,rgba(21,33,31,.92) 88%,var(--ink) 100%);pointer-events:none}
.hero-txt{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:46px}
.hero h1{font-size:clamp(34px,6vw,72px);max-width:16ch}
/* Titulo de duas frases. O limite de 16ch foi medido para uma frase so: com
   duas, o texto vira uma coluna estreita e alta que empurra os botoes para
   fora da primeira tela. 22ch mantem o mesmo numero de linhas de antes. */
.hero h1.h1-largo{max-width:22ch}
.hero p.sub{max-width:48ch;color:var(--muted);margin:18px 0 0;font-size:16.5px}
.hero .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* hero compacto (paginas internas, sem altura de tela cheia) */
.hero-sm .hero-img{height:min(52vh,440px)}

/* Hero de impacto: a fotografia e a protagonista, quase a tela inteira,
   com so frase + linha + 1 botao por cima. Pedido da proprietaria, em
   redesenho: "a fotografia deve ser a protagonista... 80-100% da altura...
   nao cubra o rosto". Ela confirmou este topo em 2026-09-20 (mostrou uma
   captura dele) depois de eu ter voltado, por engano, ao hero dividido.

   Substitui o .hero-dividido, que reservava metade da largura pro texto
   exatamente para EVITAR este corte -- a foto de capa e vertical (1600x2399)
   e um hero raso e largo faz o object-fit:cover ampliar ate a largura e
   sobrar so uma faixa horizontal fina da imagem. O pedido agora e assumir
   esse corte de proposito. O enquadramento (object-position 58%) mostra a
   barriga e o rosto juntos, e o texto vai no topo, longe do rosto -- ver o
   comentario logo abaixo.

   Contraste medido em captura de tela real (tools/Medir-Contraste-Texto.ps1,
   miolo das letras contra o fundo que o navegador desenhou): computador (com a
   coluna e o desfoque, medido de novo em 2026-09-20): 1357px cremes 9,8:1 e douradas 7,9:1
   no pior caso, 1440px 12,1:1 e 7,7:1, 1920px 12,6:1 e 7,7:1; celular 390px (sem
   coluna, composicao inalterada) 9,4:1 e 7,5:1. Minimo AA: 4,5:1. Uma medida anterior, feita por conta em JavaScript,
   deu resultado parecido mas estava errada por outro motivo: o veu cobria o
   texto na pagina real (faltava o z-index abaixo). */
.hero-impacto{--altura:min(90vh,820px);position:relative;height:var(--altura);overflow:hidden;background:var(--ink)}
/* Foto em coluna, com o resto da largura em desfoque (pedido da proprietaria em
   2026-09-20, com um recorte de exemplo: "o topo deve aparecer so essa parte").
   Antes a foto (vertical, 1600x2399) ocupava a largura toda e o cover so mostrava
   uma faixa de ~23% da altura dela em janela baixa: a barriga e o queixo
   apareciam e o OLHAR e a FRANJA saiam cortados. Medido na foto (fracao da
   altura): barriga 50-54%, labios 63%, olhos 71%, franja 72-76%.
   Agora a coluna tem largura = 1,55 x a altura do hero. Assim a foto aparece
   com 2,3 x a altura do hero e a janela mostra ~43% dela, de 35% a 78% -- da
   barriga ate a franja -- e isso vale para qualquer altura de tela, porque a
   largura acompanha a altura. object-position 61% escolhe essa janela. Se a
   coluna nao couber (tela estreita), ela vira 100% da largura e o corte cai em
   ~37%-82%, que tambem inclui olhar e franja. */
.hero-impacto .hero-fundo{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);max-width:none;object-fit:cover;object-position:center 62%;filter:blur(34px) brightness(.5) saturate(1.1)}
.hero-impacto .hero-foto{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,calc(var(--altura) * 1.55));height:100%;max-width:none;object-fit:cover;object-position:center 61%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
/* O texto fica no TOPO, nao na base -- inverso do padrao do resto do site.
   Motivo: nesta foto (gestante-01), o corte de 90vh deitado deixa a barriga
   no terco de cima da faixa visivel e o rosto no terco de baixo. Texto na
   base, como em todo hero deste site, cairia em cima do rosto dela -- e a
   proprietaria pediu explicitamente para nao cobrir o rosto. Empurrar o
   corte ainda mais pra baixo pra "salvar" o rosto cortaria a barriga fora,
   que e o assunto do proprio ensaio. A saida foi inverter: o topo da faixa
   visivel e tecido do vestido e pedra, sem nada que o texto atrapalhe, e o
   rosto sobra livre, sem veu nenhum, no terco de baixo. */
.hero-impacto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(21,33,31,.86) 20%,rgba(21,33,31,.55) 40%,rgba(21,33,31,.12) 58%,rgba(21,33,31,0) 72%,rgba(21,33,31,0) 100%)}
/* z-index:2 e obrigatorio. O veu (::after) e position:absolute e vem DEPOIS no
   HTML, entao sem isso ele pinta POR CIMA do texto: titulo, frase e botao
   ficavam apagados, com o veu a 86-100% de opacidade sobre eles. O .hero-txt
   antigo ja tinha z-index:2 pelo mesmo motivo; aqui eu esqueci, e a medida de
   contraste que fiz antes assumia o texto por cima do veu sem conferir a ordem
   real de empilhamento -- so apareceu olhando uma captura de tela de verdade. */
.hero-impacto-txt{position:absolute;inset:0 0 auto 0;padding-top:44px;z-index:2}
.hero-impacto h1{font-size:clamp(34px,6vw,68px);max-width:15ch;margin:12px 0 0;text-wrap:balance}
.hero-impacto .linha{max-width:44ch;color:var(--cream);font-family:var(--serif);font-size:clamp(16.5px,1.7vw,19px);line-height:1.5;margin:16px 0 0}
.hero-impacto .acoes{margin-top:26px}
@media(max-width:860px){
  /* No celular a foto vertical ja cabe quase inteira (o hero e alto e estreito):
     sem coluna e sem desfoque, como antes. */
  .hero-impacto{--altura:min(80vh,620px)}
  .hero-impacto .hero-fundo{display:none}
  .hero-impacto .hero-foto{left:0;transform:none;width:100%;object-position:center 58%;-webkit-mask-image:none;mask-image:none}
}

/* Hero de venda: alem do titulo tem subtitulo e dois botoes, e esse bloco
   nao cabe na altura do hero compacto. Como o texto e posicionado a partir
   da base, o excedente crescia para CIMA e o titulo sumia atras do menu
   fixo. Aqui a altura passa a ser ditada pelo conteudo, com um minimo, e a
   foto preenche o espaco por tras. */
.hero-venda{min-height:min(78vh,560px);display:flex;align-items:flex-end}
.hero-venda .hero-img{position:absolute;inset:0;width:100%;height:100%}
.hero-venda .hero-txt{position:relative;inset:auto;width:100%;padding-top:96px}
/* O degrade padrao tem uma janela transparente perto do topo, pensada para
   hero onde o texto fica so na base. Aqui o bloco de texto e alto e comeca
   cedo. Medido: sobre o amarelo forte da foto do Mais 1 Cafe, o rotulo
   dourado caia para 1,3:1 nessa faixa. Com 0,72 de opacidade sobe para
   4,8:1, acima do minimo, independente do que estiver atras. */
.hero-venda::after{background:linear-gradient(180deg,rgba(21,33,31,.35) 0%,rgba(21,33,31,.72) 18%,rgba(21,33,31,.86) 55%,rgba(21,33,31,.96) 88%,var(--ink) 100%)}

/* Veu em L, para hero de foto escura.
   O veu de cima e so vertical: ele escurece a largura inteira porque foi
   medido sobre a foto do Mais 1 Cafe, que e uma parede amarela clara e
   aguenta. Sobre um interior escuro -- o escritorio da Brunna -- a mesma
   opacidade apaga o assunto: medido, o rosto dela cai para 45/255.

   Aqui o veu vira um L: fraco na vertical, forte na coluna esquerda, onde o
   texto mora. O assunto fica a direita e deixa de pagar por um veu que
   existe para o texto do outro lado. Medido nesta foto, na regiao do texto
   (percentil 95, que e o pior caso para letra clara): rotulo dourado 4,82:1
   e texto creme 7,69:1, ambos acima do minimo AA de 4,5:1. O rosto sobe de
   45 para 57 de 255.

   A base continua fechando em ink solido: sem isso aparece uma emenda entre
   o hero e a secao seguinte, que tem fundo ink. */
.hero-venda.veu-em-L::after{background:linear-gradient(180deg,rgba(21,33,31,.14) 0%,rgba(21,33,31,.29) 18%,rgba(21,33,31,.35) 55%,rgba(21,33,31,.60) 84%,rgba(21,33,31,.88) 94%,var(--ink) 100%)}
.hero-venda.veu-em-L::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,33,31,.80) 0%,rgba(21,33,31,.80) 34%,rgba(21,33,31,.62) 45%,rgba(21,33,31,.15) 60%,rgba(21,33,31,0) 70%)}
/* Em tela estreita o texto ocupa a largura toda, entao nao existe "coluna
   esquerda" para escurecer: o veu volta a ser o vertical cheio. */
@media(max-width:860px){
  .hero-venda.veu-em-L::before{display:none}
  .hero-venda.veu-em-L::after{background:linear-gradient(180deg,rgba(21,33,31,.35) 0%,rgba(21,33,31,.72) 18%,rgba(21,33,31,.86) 55%,rgba(21,33,31,.96) 88%,var(--ink) 100%)}
}

/* Hero estendido: foto com uma faixa desfocada colada a esquerda, para dar
   fundo ao texto sem cortar a cliente nem a mesa. A faixa fica em 37,5% da
   largura da imagem (o resto e a foto real).

   Em tela larga isso nao precisa de ajuste: cover com object-position:center
   (herdado de .hero-img) mostra a largura inteira ou perde so um pouco de
   cada ponta, sobrando bastante foto real a direita.

   Em celular o problema e outro. A imagem e bem mais larga que alta (2,4:1)
   e o container e estreito e alto -- o corte manda no eixo horizontal, e
   centralizado ele mostra metade da faixa desfocada e so o comeco da mesa,
   cortando a cliente inteira para fora. Medido nesta foto: a faixa desfocada
   vai de 0 a 37,5% da largura; ela aparece por volta de 64,5% a 70%; a mesa
   com os livros comeca por volta de 51,5%. Um object-position-x de 74%
   desloca a janela visivel para comecar perto dos livros e manter o rosto
   dela dentro, ao custo do monitor no canto direito, que sai do quadro --
   troca aceitavel, o pedido foi "ela e a mesa", nao o computador. */
.hero-img.estendido{object-position:center 28%}
@media(max-width:860px){
  .hero-img.estendido{object-position:74% 28%}
}
/* Aniversario: a foto real ocupa os 28% da direita da imagem estendida (o vestido
   verde fica a ~84% da largura e os baloes a ~92%). Duas correcoes sobre o
   ajuste generico acima, que foi medido para a Empresarial:
   - X = 100%: no celular a janela visivel e estreita (~37% da largura) e o
     ajuste de 74% deixaria so a extensao desfocada na tela; 100% encosta a
     janela na direita, onde estao o rosto e os baloes.
   - Y = 6%: a estrela prateada, o ponto mais alto dos baloes, fica a 6-19% da
     altura da foto; com 28% ela sai cortada em cima. Em compensacao os pes
     saem, o que nao pesa: o pedido foi "o rosto e os baloes". */
.hero-img.estendido.foco-direita{object-position:100% 6%}

/* -------------------------------------------------------------- secoes */
section{padding:84px 0}
/* Frase-manifesto: respiro visual logo depois do hero, antes do conteudo
   comecar de verdade. Pedido da proprietaria: frase curta, nada de
   paragrafo, muito espaco vazio. Por isso o padding e quase o dobro do de
   uma secao comum, e a secao nao tem nem sec-head nem grid -- so a frase,
   centralizada, sozinha na tela. Italico para marcar registro de manifesto,
   diferente do serifado reto usado nos titulos do resto do site. */
.manifesto{padding:152px 0;text-align:center}
.manifesto p{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--cream);font-size:clamp(22px,3.4vw,40px);line-height:1.55;max-width:19ch;margin:0 auto}
@media(max-width:700px){.manifesto{padding:88px 0}}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:36px}
.sec-head h2{font-size:clamp(25px,3.2vw,38px)}

/* ---------------------------------------------------------- grid ensaios */
.ensaios{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.card{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--ink-2);display:block;text-decoration:none}
/* Mesma revelacao dos ladrilhos pequenos (.empresa-btn/.tipo-btn), aplicada
   aqui aos 6 cartoes grandes da home -- pedido explicito da proprietaria,
   com as duas escolhas juntas. Sem veu e sem opacidade reduzida: a legenda
   destes cartoes ja fica sobre uma faixa quase opaca (.cap, rgba .92), entao
   o contraste do texto nao depende do brilho da foto por tras, diferente dos
   ladrilhos pequenos onde isso importava. */
.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .6s}
.card:hover img{transform:scale(1.05);filter:grayscale(0)}
@media (hover:none){
  .card img{filter:grayscale(0)}
}
.card .cap{position:absolute;inset:auto 0 0 0;padding:18px;background:rgba(15,25,23,.92)}
.card h3{font-size:22px;margin-bottom:4px;color:var(--cream)}

/* ------------------------------------------------------------ tabela precos */
.tiers{border-top:1px solid var(--line)}
.tier{display:grid;grid-template-columns:130px 190px 1fr;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.tier .val{font-family:var(--serif);font-size:clamp(28px,3.8vw,44px);color:var(--gold);line-height:1;font-weight:300}
.tier .val small{font-size:.48em;color:var(--muted);margin-right:6px;font-weight:400}
.tier .desc{color:var(--muted);font-size:15px}
.tier .desc b{color:var(--cream);font-weight:500}
.incl{list-style:none;padding:0;margin:26px 0 0}
.incl li{padding:13px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px;display:flex;gap:14px}
.incl li::before{content:"—";color:var(--gold)}
.incl b{color:var(--cream);font-weight:500}

/* "Seu ensaio, do seu jeito": entrou no lugar da tabela de pacotes das paginas de
   ensaio (pedido da proprietaria, 2026-10-02, DEC-030). Os valores saem do site e
   sao apresentados na conversa pelo WhatsApp, entao aqui so ha texto corrido. A
   frase da direcao de pose ganha o registro do manifesto (serifado italico, filete
   dourado), o mesmo da frase de cuidado do Sobre, para o olho parar nela antes das
   fotos. As regras .tiers/.tier ficam: sao so estas cinco paginas que as usavam. */
.seu-ensaio p{max-width:62ch;margin:0;color:var(--muted);font-size:17px}
.pose-destaque{margin:34px 0;padding:2px 0 2px 22px;border-left:2px solid var(--gold);max-width:min(100%,600px)}
.seu-ensaio .pose-destaque p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,2.6vw,29px);line-height:1.38;color:var(--cream);text-wrap:balance}
/* o trecho dourado vai numa linha so: sem isso a frase se parte no meio ("Eu te /
   guio do inicio ao fim") e o destaque perde a forca, no computador e no celular */
.pose-destaque em{display:block;color:var(--gold)}
/* "Conhecer as opcoes pelo WhatsApp" tem 32 letras e quebra em duas linhas no celular;
   centraliza o texto e da folga em cima e embaixo para a quebra nao ficar apertada */
.seu-ensaio .btn{text-align:center;padding-top:10px;padding-bottom:10px;line-height:1.4}

/* --------------------------------------------------- faixa de numeros (F) */
.nums{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nums-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.num{background:var(--ink-2);padding:26px 18px;text-align:center}
.num b{display:block;font-size:clamp(26px,3.6vw,36px);color:var(--gold);font-weight:200;line-height:1}
.num span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* --------------------------------------------------- servicos sob orcamento */
.orc-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.orc-item{background:var(--ink-2);padding:26px 28px;display:flex;flex-direction:column;gap:10px}
.orc-item h3{font-size:20px;color:var(--cream)}
.orc-item p{margin:0;color:var(--muted);font-size:14.5px;flex:1}
.orc-item .btn-orc{align-self:flex-start;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:10px 16px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none;transition:.2s}
.orc-item .btn-orc:hover{background:var(--gold);color:var(--ink)}

/* --------------------------------------------- barra de empresas
   Cada botao leva para a secao daquela empresa mais abaixo. O nome vai na
   tipografia do site, com a foto em cinza atras: os logos recortados de foto
   nao funcionaram (fundos, angulos e luzes diferentes demais entre eles).
   Trocavel por arquivo de logo real quando os clientes mandarem. */
/* O mesmo componente serve para as empresas atendidas (pagina Empresarial)
   e para os subtipos de ensaio (pagina Feminino). Os seletores duplos
   evitam duplicar as regras so para trocar o nome. */
.empresas-bar,.tipos-bar,.idades-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.empresa-btn,.tipo-btn{position:relative;display:block;text-decoration:none;background:var(--ink-2);overflow:hidden;aspect-ratio:16/9}
.empresa-btn img,.tipo-btn img{width:100%;height:100%;object-fit:cover;opacity:.32;transition:opacity .3s,transform .6s,filter .5s;filter:grayscale(1)}
/* Cor no hover com saturate(1.7): a proprietaria pediu ~70% a mais de cor.
   Mantenha grayscale antes de saturate: com a ordem trocada o navegador nao
   anima, troca o filtro de uma vez (testado).
   Contraste remedido nas 11 miniaturas: cor e saturacao nao pioraram nenhuma
   (o pior pixel e branco estourado, que o filtro nao altera). */
.empresa-btn:hover img,.tipo-btn:hover img{opacity:.38;transform:scale(1.05);filter:grayscale(0) saturate(1.7)}
/* Hover nao existe em tela de toque -- e o dedo nao "paira", so toca. Sem
   isto, quem usa celular ficaria pra sempre com a foto apagada e em preto e
   branco, porque nunca aciona o :hover. `hover:none` testa a CAPACIDADE do
   ponteiro, nao a largura da tela: um notebook conversivel com tela de toque
   continua tendo mouse, e um celular deitado nao ganha mouse por ficar
   largo. Os mesmos valores do hover, sem o zoom -- zoom parado nao comunica
   nada, so faz sentido como reacao a um movimento. */
@media (hover:none){
  .empresa-btn img,.tipo-btn img{opacity:.38;filter:grayscale(0) saturate(1.7)}
}
/* Veu entre a foto e o texto. Sem ele o subtitulo dourado de 11px cai para
   3,03:1 sobre as areas claras da miniatura -- abaixo do minimo de 4,5:1, e
   era isso que sumia na tela da proprietaria, nao corte de texto.
   Medido por amostragem de pixel das oito miniaturas do site, recompondo o
   que o navegador monta: --ink-2, foto em cinza, veu, texto. Com .45 o pior
   caso vai a 5,04:1 em repouso.
   O hover caiu de .55 para .38 pelo mesmo motivo: a .55 o subtitulo voltava
   a 3,09:1 mesmo com veu de .50. Em .38 fica 4,53:1, e o scale(1.05) ja
   sinaliza que o ladrilho e clicavel. */
.empresa-btn::before,.tipo-btn::before{content:"";position:absolute;inset:0;background:rgba(21,33,31,.45);z-index:1;pointer-events:none}
.empresa-btn .nome,.tipo-btn .nome{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center}
.empresa-btn .nome b,.tipo-btn .nome b{font-family:var(--sans);font-size:clamp(15px,1.7vw,20px);font-weight:400;color:var(--cream);letter-spacing:.04em;line-height:1.15}
.empresa-btn .nome span,.tipo-btn .nome span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.empresa-sec,.tipo-sec{padding:64px 0;border-bottom:1px solid var(--line)}
/* Subpasta dentro de Aniversario. Mesmo componente da secao principal, com
   metade do respiro e sem a linha divisoria: as quatro idades sao um grupo
   so, e uma linha entre elas as separaria como se fossem subtipos irmaos. */
/* Frase que liga a galeria variada as pastas por idade logo abaixo. Sem ela
   a barra de ladrilhos aparece sem explicacao, e o visitante nao sabe que
   clicar leva a outra pagina. */
.aniv-dica{margin:26px 0 0;color:var(--muted);font-size:14.5px}
.idade-sec{padding:34px 0 0}
.idade-sec:last-of-type{padding-bottom:64px;border-bottom:1px solid var(--line)}
.tipo-head h3{font-size:clamp(19px,2.2vw,24px);font-family:var(--serif);font-weight:400;color:var(--cream)}
.empresa-head,.tipo-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.empresa-head h2,.tipo-head h2{font-size:clamp(24px,3.2vw,34px)}
.empresa-head p,.tipo-head p{margin:6px 0 0;color:var(--muted);font-size:15px;max-width:56ch}
.empresa-fotos,.tipo-fotos{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.empresa-fotos img,.tipo-fotos img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--ink-2)}
/* Video dentro da fileira de fotos (Mais 1 Cafe): mesma largura, proporcao e
   fundo das fotos, para ocupar o lugar de uma delas sem diferenca de tamanho.
   O video e 9:16 e a caixa e 3:4, entao o object-fit corta um pouco em cima e
   embaixo; 35% desloca o corte para mostrar mais o alto (rostos) do que o
   chao. display:block tira o vao de linha que o video ganha por ser inline. */
.empresa-fotos video{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 35%;background:var(--ink-2)}
/* So a fileira da WAM. As fotos dela sao deitadas 3:2, e a proporcao 3/4 acima
   cortava metade da largura de cada uma -- em foto de equipe, cortava gente das
   pontas. Moving Gym e Mais 1 Cafe sao todas em pe e nunca perderam nada; a
   Manaahim e misturada e a proprietaria decidiu deixar como esta, porque virar
   a fileira so passaria o corte para a foto da vitrine. */
.empresa-fotos.deitado img{aspect-ratio:3/2}
/* Fileira de seis. A grade padrao e de cinco: a sexta foto cairia sozinha
   numa segunda linha, que le como erro e nao como escolha.
   O modificador precisa ser repetido dentro de cada media query abaixo. Sem
   isso ele venceria as consultas por especificidade -- '.tipo-fotos.seis' tem
   duas classes contra uma de '.tipo-fotos' -- e o celular ficaria com seis
   colunas. Ja aconteceu neste projeto com um style inline na pagina Feminino. */
.tipo-fotos.seis{grid-template-columns:repeat(6,1fr)}

/* casos/prova social com nome de cliente */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.case{position:relative;overflow:hidden;background:var(--ink-2);display:block;text-decoration:none}
.case img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s}
.case:hover img{transform:scale(1.03)}
.case .quem{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block}
.case h3{font-size:17px;margin-top:5px;font-weight:300;color:var(--cream)}

/* ---------------------------------------------------------------- galeria */
.gal{columns:3;column-gap:2px}
.gal img{width:100%;margin-bottom:2px;break-inside:avoid}


/* --------------------------------------------------------- depoimentos */
/* Fotos redondas com anel dourado, no formato dos destaques do Instagram --
   e o formato que a cliente dela ja reconhece. A foto e sempre do ensaio da
   propria cliente que falou, nunca foto de banco.
   Em cor, e nao em preto e branco como os cartoes de ensaio: aqui a foto serve
   para dizer "esta pessoa existe e foi cliente", e rosto em cor le como gente,
   nao como peca de portfolio. */
.svg-oculto{position:absolute;width:0;height:0;overflow:hidden}
.dep-sec{background:var(--ink-2)}
/* fora do ritmo ink-2: na Aniversario a galeria de cima e o convite de baixo ja sao ink-2 */
.dep-sec.fundo-ink{background:var(--ink)}
.dep-sec.fundo-ink .dep-anel{background:var(--ink)}
.estrelas{display:inline-flex;gap:3px}
.estrelas svg{width:14px;height:14px;fill:var(--gold)}
.dep{margin:0}
/* o anel: 1px dourado com folga de 5px ate a foto. A folga e o que faz ler
   como anel do Instagram em vez de borda colada na foto. */
.dep-anel{display:block;width:max-content;padding:5px;border:1px solid var(--gold);border-radius:50%;background:var(--ink-2)}
a.dep-anel{transition:transform .3s}
a.dep-anel:hover{transform:scale(1.04)}
.dep-foto{display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--ink-3)}
.dep blockquote{font-family:var(--serif);font-style:italic;color:var(--cream);font-size:17.5px;line-height:1.45;margin:14px 0 0;max-width:36ch}
/* aspas em dourado, desenhadas pelo CSS: nao entram no texto copiado nem na
   leitura de quem usa leitor de tela, e nao dependem de a proprietaria digitar
   aspas iguais nos quatro depoimentos. */
.dep blockquote::before{content:"\201C";color:var(--gold);margin-right:2px}
.dep blockquote::after{content:"\201D";color:var(--gold)}
.dep figcaption{margin-top:16px;display:flex;flex-direction:column;gap:3px}
.dep figcaption b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--cream)}
.dep figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.dep-link{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color .2s}
.dep-link:hover{border-bottom-color:var(--gold)}
/* destaque: foto maior ao lado do texto, separado dos outros tres por uma linha */
.dep-destaque{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding-bottom:44px;border-bottom:1px solid var(--line);margin-bottom:44px}
.dep-destaque .dep-foto{width:176px;height:176px}
.dep-destaque blockquote{font-size:clamp(21px,2.6vw,30px);line-height:1.35;max-width:26ch}
.dep-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.dep-grade .estrelas{margin-top:18px}
@media(max-width:860px){
  /* No celular a foto vai para cima do texto nos quatro, inclusive no destaque:
     duas colunas com 176px de foto deixariam 4 ou 5 palavras por linha. */
  .dep-destaque{grid-template-columns:1fr;gap:22px;padding-bottom:34px;margin-bottom:34px}
  .dep-destaque .dep-foto{width:132px;height:132px}
  .dep-grade{grid-template-columns:1fr;gap:34px}
  .dep blockquote{max-width:none}
}

/* --------------------------------------------------------- sobre / retrato */
.sobre{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center}
.sobre p{color:var(--muted);font-size:16.5px}
.sobre .lead{font-family:var(--serif);font-size:clamp(21px,2.5vw,29px);color:var(--cream);line-height:1.32}
/* A frase de cuidado e a unica do bloco que fala de sentimento, entao ganha o
   registro do manifesto da home (serifado italico, creme) com um filete dourado
   na esquerda. Serve para o olho parar nela sem virar um segundo titulo. */
.sobre p.cuidado{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--cream);border-left:2px solid var(--gold);padding-left:18px;margin-top:26px}

/* ------------------------------------------------------------------- cta */
.cta{background:var(--ink-2);text-align:center}
.cta h2{font-size:clamp(27px,4vw,48px);margin-bottom:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:0 32px;border:1px solid var(--gold);color:var(--gold);transition:.25s;background:transparent}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn-solid{background:var(--gold);color:var(--ink)}
.btn-solid:hover{opacity:.85;background:var(--gold);color:var(--ink)}
.acoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* --------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line);padding:30px 0}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot a{min-height:var(--tap);display:inline-flex;align-items:center;text-decoration:none}
.cnpj{margin:12px 0 0;font-size:11px;color:var(--muted)}

/* --------------------------------------------------------- pagina contato */
.contato-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:36px}
.contato-item{background:var(--ink-2);padding:30px 26px;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.contato-item .ic{font-family:var(--serif);font-size:30px;color:var(--gold)}
.contato-item h2{font-size:17px;color:var(--cream);font-weight:400;font-family:var(--sans)}
.contato-item span{color:var(--muted);font-size:14px}

/* ----------------------------------------------------------- responsivo */
/* Servicos sob orcamento, opcao A escolhida pela proprietaria em 2026-09-16.
   Hero unico com foto, e os quatro servicos como celulas inteiras clicaveis:
   a celula toda e o botao, nao so o link no fim. */
.optA-hero{position:relative;border-bottom:1px solid var(--line)}
.optA-hero img{width:100%;height:min(48vh,400px);object-fit:cover;object-position:center 35%}
.optA-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,33,31,.35) 0%,rgba(21,33,31,.55) 55%,var(--ink) 100%)}
.optA-txt{position:absolute;inset:auto 0 0 0;padding-bottom:36px}
.optA-txt h2{font-size:clamp(24px,3.6vw,38px);max-width:20ch;color:var(--cream)}
.optA-txt p{color:var(--muted);max-width:52ch;margin:12px 0 0;font-size:15px}
.optA-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.optA-cell{background:var(--ink-2);padding:26px 22px;display:flex;flex-direction:column;gap:8px;text-decoration:none;transition:background .2s}
.optA-cell:hover{background:#22322e}
.optA-cell h3{font-size:17px;color:var(--cream);font-weight:400}
.optA-cell p{margin:0;color:var(--muted);font-size:13px;flex:1}
.optA-cell span.cta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

@media(max-width:900px){
  nav ul{display:none}
  nav ul.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--ink-2);border-bottom:1px solid var(--line);padding:0}
  nav ul.open li{border-top:1px solid var(--line)}
  nav ul.open a{display:flex;padding:0 28px}
  .menu-btn{display:block}
  .ensaios{grid-template-columns:1fr 1fr}
  .gal{columns:2}
  .sobre{grid-template-columns:1fr;gap:30px}
  .tier{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .nums-in{grid-template-columns:1fr 1fr}
  .orc-lista,.cases,.contato-grid{grid-template-columns:1fr}
  .empresas-bar,.tipos-bar,.idades-bar{grid-template-columns:1fr 1fr}
  .optA-bar{grid-template-columns:1fr 1fr}
  .empresa-fotos,.tipo-fotos{grid-template-columns:repeat(3,1fr)}
  .tipo-fotos.seis{grid-template-columns:repeat(3,1fr)}
  section{padding:58px 0}
}
@media(max-width:520px){
  .ensaios{grid-template-columns:1fr}
  .gal{columns:1}
  /* 2 colunas e nao 1. Em coluna unica a foto ocupa ~334 CSS px, o que pede
     668 px numa tela 2x e 1002 numa 3x -- acima de TODAS as fontes do site,
     que vao de 540 a 922. A imagem era esticada em qualquer telefone 3x.
     Em duas colunas cada foto pede 332 px em 2x e 498 em 3x, e nenhuma
     fonte fica devendo. De quebra corta pela metade a rolagem da secao. */
  .empresa-fotos,.tipo-fotos{grid-template-columns:repeat(2,1fr)}
  .tipo-fotos.seis{grid-template-columns:repeat(2,1fr)}
  .optA-bar{grid-template-columns:1fr}
  .brand-lock img{height:26px}
}

/* link/QR "menu aberto" (?menu=galeria): destaca o item Minha Galeria para a pessoa so tocar nele */
nav a.destaque{color:var(--gold);font-weight:500}
nav a.destaque::before{content:"";width:6px;height:6px;margin-right:10px;background:var(--gold);transform:rotate(45deg);flex-shrink:0}