/* Serviços: sete frentes em faixa lateral (versão B, aprovada em 02/10/2026).
   Comportamento da referência (GSAP ScrollTrigger, pin + scrub), com a seção inteira presa: o título fica na tela
   e anda para o lado o mesmo tanto que a página rola (pedido do responsável; exceção à rolagem nativa).
   Da referência azizkhaldi.com: grade de linhas finas, numeração, filete, navegação lateral, entrada desenhada.
   Fora: ícone, cor, fade genérico ao rolar. */
:root{--linha:rgba(255,255,255,.22);--sai:cubic-bezier(.23,1,.32,1);--move:cubic-bezier(.77,0,.175,1)}
.frentes{position:relative;min-height:100svh;box-sizing:border-box;padding:calc(84px + 4vh) var(--grade-margem) 6vh;display:flex;flex-direction:column;justify-content:center;overflow-x:clip}
.frentes-topo{margin-bottom:clamp(56px,10vh,112px)} /* dobro do anterior, pedido do responsável */
.frentes-pino{position:relative}
.frentes-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.frentes-chamada{margin:0;font-size:clamp(26px,2.5vw,40px);font-weight:200;line-height:1.18;max-width:44ch;text-wrap:balance}

.frentes-lista{list-style:none;margin:0;padding:0;position:relative;display:flex;width:max-content;will-change:transform}
.frente{position:relative;flex:0 0 min(30vw,440px);display:flex;flex-direction:column;gap:22px;min-height:clamp(280px,46vh,440px);padding:24px clamp(22px,2.2vw,36px) clamp(26px,2.6vw,40px)}
.frente:last-child{border-right:1px solid var(--linha)}
.frente-num{align-self:flex-end;font-size:14px;font-weight:300;color:var(--muted,#b3b3b3);font-variant-numeric:tabular-nums;transition:color .2s ease}
.frente-filete{display:block;height:1px;position:relative;overflow:hidden;background:var(--linha)}
.frente-filete i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--sai)}
.frente-nome{margin:auto 0 0;font-size:clamp(32px,3vw,52px);font-weight:200;line-height:1.02;letter-spacing:-.01em}
.frente-desc{margin:0;font-size:15px;font-weight:300;line-height:1.5;color:var(--muted,#b3b3b3);max-width:40ch;min-height:9em;text-wrap:pretty}
@media (hover:hover) and (pointer:fine){.frente:hover .frente-filete i{transform:none}.frente:hover .frente-num{color:#fff}}


/* entrada: linhas se desenham, textos sobem por máscara (sem fade) */
.traco{position:absolute;left:0;right:0;top:0;height:1px;background:var(--linha);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--move);transition-delay:calc(var(--i,0)*70ms)}
.traco-v{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--linha);transform:scaleY(0);transform-origin:top;transition:transform .9s var(--move);transition-delay:calc(var(--i,0)*70ms + 120ms)}
.revela{clip-path:inset(0 0 100% 0);transform:translateY(.5em);transition:clip-path .7s var(--sai),transform .7s var(--sai);transition-delay:calc(var(--i,0)*70ms + var(--d,0ms))}
.frentes.entrou .revela{clip-path:inset(-.15em -.15em -.3em -.15em);transform:none}
.frentes.entrou .traco,.frentes.entrou .traco-v{transform:none}

@media (max-width:860px){.frente{flex-basis:78vw;min-height:0;gap:18px}.frente-desc{min-height:0;font-size:14px}.frentes-chamada{font-size:24px}.frentes-topo{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.revela,.traco,.traco-v,.frente-filete i,x{transition:none!important;clip-path:none!important;transform:none!important}}

/* sem GSAP ou com movimento reduzido: a faixa rola para o lado com o dedo ou o trackpad, sem prender */
html:not(.frentes-guiada) .frentes-pino{overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--grade-margem)*-1)}
html:not(.frentes-guiada) .frentes-pino::-webkit-scrollbar{display:none}
/* celular: nomes alinhados entre os cartões (descrição com a mesma altura) */
@media (max-width:860px){.frente-desc{min-height:13.5em}}

/* base dos cartões fechada por linha fina (a barra de progresso saiu, pedido do responsável) */
.frente{border-bottom:1px solid var(--linha)}

/* diagramação escolhida (A · nome grande nos polos): cartão quadrado, nome grande no topo, descrição na base */
.frente{aspect-ratio:1/1;min-height:0;justify-content:space-between;overflow:hidden}
.frente-nome{margin:0;font-size:clamp(40px,3.7vw,60px);line-height:.95;letter-spacing:-.02em}
.frente-desc{min-height:0;font-size:14px}
@media (max-width:860px){.frente{flex-basis:84vw}.frente-nome{font-size:clamp(34px,10vw,44px)}.frente-desc{min-height:0;font-size:13px}}
/* descrição em 18 px (15 px no celular), escolhida pelo responsável em 02/10/2026 */
.frente-desc{font-size:18px;line-height:1.4;max-width:none}
@media (max-width:860px){.frente-desc{font-size:15px}}

/* quebras de linha: parágrafo sem palavra sozinha no fim (pretty) e medida confortável; títulos equilibrados (balance) */
.frente-desc{text-wrap:pretty;max-width:34ch;hyphens:manual}
.frentes-chamada,.frente-nome{text-wrap:balance}

/* quebras escritas à mão pelo responsável (scripts/descricoes.txt): uma linha por linha no computador;
   no celular o texto volta a correr. Se a tela for estreita demais para uma linha, ela quebra em vez de cortar. */
.frente-desc{max-width:none}
.frente-desc .l{display:block}
@media (max-width:860px){.frente-desc .l{display:inline}.frente-desc{text-wrap:pretty}}
/* cartão nunca menor que 410 px no computador: a linha mais longa escrita à mão mede 332 px em 18 px */
@media (min-width:861px){.frente{flex-basis:clamp(410px,30vw,440px)}}
/* celular: as mesmas quebras do computador; o texto acompanha a largura do cartão
   (linha mais longa = 18,9 em; área do cartão = 19,2 em), então nenhuma linha quebra sozinha */
@media (max-width:860px){
 .frente{padding-left:16px;padding-right:16px}
 .frente-desc{font-size:clamp(11.5px,calc((84vw - 32px) / 20),17px)} /* mínimo de 11,5 px: em tela de 320 px as linhas escritas à mão ainda cabem sem quebrar */
 .frente-desc .l{display:block}
}
/* descrição sem espaçamento extra entre letras (no celular um estilo antigo somava 0,136 px por letra) */
.frente-desc{letter-spacing:0}
/* cartão invertido (escolhido pelo responsável em 02/10/2026, celular e computador): texto no topo, nome na base; só ordem visual, o leitor de tela continua lendo nome e depois texto */
.frente-desc{order:-1}
/* cascata da entrada: o atraso de cada cartão vem daqui (estilo embutido no HTML é bloqueado pela política de segurança) */
.frente:nth-child(2){--i:1}.frente:nth-child(3){--i:2}.frente:nth-child(4){--i:3}.frente:nth-child(5){--i:4}.frente:nth-child(6){--i:5}.frente:nth-child(7){--i:6}
/* tablet em pé: cartão no tamanho do computador (antes ocupava 84% da tela, com o texto perdido num canto) */
@media (min-width:701px) and (max-width:860px){
 .frente{flex-basis:440px;padding-left:28px;padding-right:28px}
 .frente-desc{font-size:var(--t-texto)!important}
}