/* Seções das páginas */

/* Home no estilo Polestar: a tela inteira é do Núcleo, à direita, como o carro; texto curto em cima
   à esquerda e um botão só. Serviços, Produtos e Projetos ficam no menu do topo */
.hero { position: relative; display: grid; align-content: start; min-height: calc(100vh - 4.8125rem); min-height: calc(100svh - 4.8125rem); }
.hero > div:first-child { position: relative; z-index: 1; padding-top: clamp(2.5rem, 9vh, 6.25rem); max-width: 32.5rem; }
.hero h1 { font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; }
.hero h1 strong { font-weight: 500; }
/* No celular, um respiro entre o título e a frase (no computador a margem vem do bloco de 861px) */
.hero .lead { margin-top: .625rem; }
.lead { color: var(--color-muted); font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 32.5rem; margin-bottom: 1.625rem; }

/* Dois caminhos, como na Bambu Lab: agir (cheio) ou conhecer (contorno) */
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* O Núcleo sai do container até a borda direita da janela */
.orb-wrap { position: absolute; top: 0; bottom: 0; left: 30%; right: calc(50% - 50vw); }
.orb-wrap canvas { width: 100%; height: 100%; }

/* Linhas horizontais bem fracas atrás do orbe, como no app do Núcleo */
.orb-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, var(--color-scanline) 0 1px, transparent 1px 4px);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  pointer-events: none;
}

.section { padding-block: 4rem; }
/* Mais respiro no computador: seções mais afastadas e grids de cards mais abertos */
@media (min-width: 861px) {
  .section { padding-block: 6rem; }
  .intro { padding-top: 6.5rem; }
  .cards, .projects { gap: 1.5rem; }
  .section-title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 2rem; }
}
/* Detalhe da marca: o orbe do Núcleo, bem fraco, atrás do título de cada página (a home, a Confiança e
   Parceiros já têm o orbe animado; a 404 fica limpa) */
.intro:not(.trust-intro):not(.notfound) { position: relative; isolation: isolate; overflow: clip; }
.intro:not(.trust-intro):not(.notfound)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: 0; top: 50%; width: min(26.25rem, 60vw); aspect-ratio: 1; transform: translateY(-45%);
  background: url("../brand/nizity-logo.svg") center / contain no-repeat;
  opacity: .12;
}
@media (max-width: 860px) {
  .intro:not(.trust-intro):not(.notfound)::after { width: 13.75rem; right: -2.5rem; top: 30%; opacity: .08; }
}

/* Serviços */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }

/* Processo, no estilo de etapas de missão */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
.step { border-top: 1px solid var(--color-line-strong); padding-top: 1.125rem; }
.step-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .625rem; }
.step-num { font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-accent); }
.step h3 { font-size: 1.1rem; font-weight: 600; }
.step p { color: var(--color-muted); }

/* Contato: uma coluna, o botão embaixo e à esquerda (como no fim da página do Salão); o título fica menor que o h1 */
.contact { display: grid; gap: 1.625rem; }
.contact h2 { font-weight: 300; font-size: var(--fs-closing); line-height: 1.05; letter-spacing: -0.02em; }
.contact h2 strong { font-weight: 600; }
.contact p { color: var(--color-muted); margin-top: .875rem; font-size: 1.05rem; }
.contact-actions { display: flex; gap: .875rem; flex-wrap: wrap; }

/* Página de projetos */
.intro { padding-block: 4.5rem 2rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: end; }
.intro h1 { font-weight: 300; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; }
.intro h1 strong { font-weight: 600; }
.intro p { color: var(--color-muted); margin-top: 1.125rem; max-width: 32.5rem; }
.stack-groups { display: grid; gap: .875rem; }
.stack-groups .item-type { display: block; margin-bottom: .375rem; }
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
/* Ficha sozinha (ex.: o único exemplo da landing page) ocupa a linha toda, sem vão ao lado */
.projects > .item:only-child { grid-column: 1 / -1; }
/* Página de projetos: 3 colunas na tela larga; em 2 colunas, a última ficha sem par ocupa a linha toda */
@media (min-width: 1100px) {
  .project-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .project-grid > .item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.project-fields { display: grid; gap: .875rem; margin-bottom: 1.125rem; }
.project-fields .item-type { display: block; color: var(--color-accent); margin-bottom: 2px; }
.project-fields p { color: var(--color-muted); }
.item:target { scroll-margin-top: 32px; animation: target-glow 2.4s ease-out 1; border-color: var(--color-exotic); }
/* Chegada pelo "O que é isso?" da home: o cartão do Núcleo acende e apaga uma vez */
@keyframes target-glow {
  0%, 30% { box-shadow: 0 0 0 2px var(--color-exotic), 0 0 40px var(--color-exotic-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Fora do fluxo: o canvas não soma altura, e o cabeçalho do Núcleo fica da altura dos outros na grade */
.mini-orb { position: absolute; top: .75rem; right: .875rem; width: 4.5rem; height: 4.5rem; }
.item-head:has(> .mini-orb) { padding-right: 6rem; }

@media (max-width: 860px) {
  /* Celular, como na Bambu Lab: texto e dois caminhos em cima, o Núcleo logo abaixo, como a foto do produto */
  .hero { min-height: 0; }
  .hero > div:first-child { padding-top: 2rem; }
  .orb-wrap { position: relative; inset: auto; height: min(92vw, 30rem); margin: -.75rem calc(50% - 50vw) 0; }
  .cards, .steps, .projects { grid-template-columns: 1fr; }
  .intro { grid-template-columns: 1fr; }
}

/* Link com seta, sem caixa (o "Quero ser piloto →") */
.home-link { display: inline-flex; align-items: center; gap: .75rem; padding: .9375rem .25rem; font-size: .92rem; font-weight: 500; transition: color .15s; }
.home-link:focus-visible { color: var(--color-accent); }
@media (hover: hover) { .home-link:hover { color: var(--color-accent); } }
.hero-actions { align-items: center; }

/* Home: uma seção por categoria (no computador, mais respiro: bloco no fim desta parte) */
.home-sec { padding-top: 3rem; }
.home-sec .kicker { margin-bottom: .875rem; }
.home-sec h2 { font-weight: 500; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1.125rem; }
/* Produtos na home: prévia da página do Salão (mesmo molde, gerada por tools/gen_pages.py),
   cortada com um degradê até o "Ver mais", que abre o resto aqui mesmo. O corte (--pv-cut) e a classe
   vêm do JS (main.js): sem JS a prévia aparece inteira. O overflow hidden é a reserva de quem não conhece clip (Safari < 16) */
@property --pv-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
.salao-pv { transition: max-height .6s cubic-bezier(.2, .7, .2, 1), --pv-fade .6s; }
.salao-pv.is-cut, .salao-pv.is-moving { overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(#000 calc(100% - var(--pv-fade)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--pv-fade)), transparent); }
.salao-pv.is-cut { --pv-fade: 9.375rem; max-height: var(--pv-cut, 68.75rem); }
.salao-pv .cs-hero { padding-top: .75rem; }
/* Na prévia o h2 da seção lidera: sem nome do produto, a frase de contexto abre o bloco */
.salao-pv .cs-sec > h3 { font-size: 1.3rem; }
.pv-toggle { display: flex; width: fit-content; margin: 0 auto; background: none; border: 0; }
.pv-arrow { transition: transform .3s; }
.pv-toggle[aria-expanded="true"] .pv-arrow { transform: rotate(180deg); }
.pv-all { width: 100%; justify-content: space-between; margin-top: 1rem; }
/* Celular estreito: os dois caminhos cabem na mesma linha (topo da home e do Salão); o botão de Produtos, também */
@media (max-width: 480px) {
  .hero-actions { gap: .375rem; }
  .hero-actions .btn, .cs-acts .btn, .pv-all { padding: .875rem 1rem; }
  .home-link { gap: .625rem; }
}
/* Até 400 px (e com a fonte do sistema maior) ainda mais justo; se não couber, o link desce sem vazar */
@media (max-width: 400px) {
  .hero-actions .btn, .cs-acts .btn, .pv-all { padding: .8125rem .75rem; }
  .home-link { gap: .5rem; padding-inline: 2px; }
}

/* Páginas de serviço */
/* Serviços (página única): ao abrir, um serviço ocupa a tela inteira abaixo do topo, de ponta a ponta, numa
   superfície própria (o card) que no pé se funde com o fundo da página. O texto fica de um lado e o orbe animado
   do outro; embaixo, um losango por serviço. O texto se arrasta para os lados e o orbe fica, com o anel de ícones
   girando com o arrasto e trocando de tom (services-rail.js e services-orb.js).
   Sem o script (sem .svc-carousel-on), o trilho só rola e os detalhes ficam um embaixo do outro */
/* Tom de cada serviço (rosa, dourado, violeta: as cores do orbe animado em cada estado, ver tokens.css): o dos
   losangos e do botão (--svc-tint), o do brilho (--svc-glow) e o do texto em cima do botão (--svc-on). A tela segue
   o serviço da vez; cada card, painel e losango leva o tom do próprio serviço. Registrados para
   a troca ser um degradê no tempo, no mesmo ritmo da cor do orbe */
@property --svc-tint { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --svc-glow { syntax: "<color>"; inherits: true; initial-value: transparent; }
.svc-carousel[data-current="landing"], :is(.svc-card, .svc-panel, .svc-dot)[data-service="landing"] { --svc-tint: var(--color-svc-landing); --svc-glow: var(--color-glow-svc-landing); --svc-on: var(--color-on-svc-landing); }
.svc-carousel[data-current="system"], :is(.svc-card, .svc-panel, .svc-dot)[data-service="system"] { --svc-tint: var(--color-svc-system); --svc-glow: var(--color-glow-svc-system); --svc-on: var(--color-on-svc-system); }
.svc-carousel[data-current="maintenance"], :is(.svc-card, .svc-panel, .svc-dot)[data-service="maintenance"] { --svc-tint: var(--color-svc-maintenance); --svc-glow: var(--color-glow-svc-maintenance); --svc-on: var(--color-on-svc-maintenance); }

.svc-carousel {
  /* A janela menos o topo do site (e o fio de baixo dele) */
  --svc-stage: calc(100svh - var(--header-height) - 1px);
  /* Respiro nas laterais: o texto nunca entra nele (onde antes ficavam as setas; a tela do PC segue igual) */
  --svc-edge: 4.75rem;
  --svc-orb: min(44vw, calc(var(--svc-stage) * .76), 45rem);
  /* Onde o ícone do serviço da vez fica aceso no anel do orbe: à esquerda, apontando para o texto (services-orb.js) */
  --svc-base: 180deg;
  /* Pé do card, que se funde com o fundo da página (sem emenda seca com os detalhes) */
  --svc-foot: clamp(4.5rem, 16vh, 10rem);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  /* A superfície do card, com um toque do tom do serviço */
  background: linear-gradient(color-mix(in srgb, var(--svc-glow) 5%, var(--color-panel-solid)) calc(100% - var(--svc-foot)), transparent);
  transition: --svc-tint .8s ease, --svc-glow .8s ease;
}

.svc-carousel-track {
  position: relative; z-index: 1;
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.svc-carousel-track::-webkit-scrollbar { display: none; }
.svc-carousel-track:focus-visible { outline-offset: -4px; }
.svc-card { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; align-items: center; min-height: var(--svc-stage); }
.svc-card-inner {
  width: 100%; max-width: var(--max-width); margin: 0 auto; padding-block: clamp(2rem, 7vh, 5rem);
  /* Alinha com o logo do topo; em tela mais estreita que o conteúdo + respiro, recua o que falta */
  padding-inline: max(var(--gutter), calc(var(--svc-edge) + .75rem - max(0px, (100vw - var(--max-width)) / 2)));
}
.svc-card-inner > * { max-width: min(37.5rem, 52%); }
.svc-card-type { display: flex; align-items: center; gap: .875rem; font-size: 1rem; color: var(--color-muted); }
.svc-card-type::before { content: ""; width: .5625rem; height: .5625rem; border: 1.5px solid var(--svc-tint); transform: rotate(45deg); flex-shrink: 0; margin-left: .1875rem; }
.svc-card-title { font-weight: 300; font-size: clamp(2.6rem, 5.8vw, 5.4rem); line-height: .98; letter-spacing: -0.035em; margin-top: 1.125rem; text-wrap: balance; overflow-wrap: anywhere; }
.svc-card-title strong { font-weight: 600; }
.svc-card-text { color: var(--color-muted); font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.45; margin-top: 1.375rem; max-width: min(29.375rem, 52%); text-wrap: pretty; }
.svc-card-perks { gap: .75rem; margin-top: 1.875rem; padding-top: 0; border-top: 0; }
.svc-card-perks .perk { font-size: 1rem; }
.svc-card .perk::before { border-color: var(--svc-tint); }
.svc-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2.375rem; }
/* O botão do card no tom do serviço (nem preto, nem sempre violeta): combina com o orbe e os losangos */
.svc-card .btn-accent { --btn-tone: var(--svc-tint); --btn-on: var(--svc-on); }

/* O orbe, no meio da 1ª tela: o mesmo orbe animado do topo da home (canvas do services-orb.js), na cor do serviço,
   com os ícones num anel em volta, girando com o trilho; o do serviço da vez fica aceso no ponto do anel que aponta
   para o texto (--svc-base: à esquerda no computador, embaixo no celular). Em volta, um halo bem fraco que tinge a
   tela (no claro, mais leve). Sem JS, a imagem parada do orbe da marca, do mesmo tamanho */
.svc-orb { position: absolute; z-index: 0; top: min(50%, var(--svc-stage) / 2); left: calc(50% + min(24vw, 20.625rem)); width: var(--svc-orb); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.svc-orb::before { content: ""; position: absolute; inset: -45%; background: radial-gradient(closest-side, color-mix(in srgb, var(--svc-glow) calc(14% * var(--glow-strength)), transparent), transparent); }
/* O canvas passa um pouco da caixa (12% de cada lado): o ícone aceso e o brilho dele, na beira do anel, não cortam */
.svc-orb-canvas { position: absolute; inset: -12%; width: 124%; height: 124%; }
.svc-orb-still { position: absolute; inset: 6%; width: 88%; height: 88%; }
/* A imagem parada só some quando o canvas aparece: se o módulo do orbe falhar, ela fica no lugar (como em product.css) */
:root[data-theme] .svc-orb:has(.svc-orb-canvas:not([hidden])) .svc-orb-still { visibility: hidden; }

/* Losangos embaixo, um por serviço (como os da vitrine de projetos da home): o do serviço da vez fica cheio, no tom
   dele, e cada um leva ao seu serviço. No PC ficam embaixo do orbe; no celular, no pé da 1ª tela */
.svc-carousel { --svc-dots-h: 2.75rem; }
.svc-dots {
  position: absolute; z-index: 2; left: calc(50% + min(24vw, 20.625rem)); translate: -50% 0;
  top: min(calc(min(50%, var(--svc-stage) / 2) + var(--svc-orb) / 2 + .25rem), calc(var(--svc-stage) - var(--svc-dots-h) - .5rem));
  display: flex; height: var(--svc-dots-h);
}
.svc-dot { display: grid; place-items: center; width: 2rem; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.svc-dot::before { content: ""; width: .5rem; height: .5rem; border: 1px solid var(--color-line-strong); rotate: 45deg; transition: background .3s, border-color .3s, rotate .3s; }
.svc-dot[aria-current="true"]::before { background: var(--svc-tint); border-color: var(--svc-tint); rotate: 135deg; }
.svc-dot:focus-visible { outline-offset: -8px; }
@media (hover: hover) { .svc-dot:hover::before { border-color: var(--svc-tint); } }

/* Arrasto: com o mouse, a mãozinha mostra que o texto se arrasta para o lado (services-rail.js); arrastando, o
   encaixe no card desliga até soltar e o texto não é selecionado */
@media (hover: hover) and (pointer: fine) {
  .svc-carousel-on .svc-carousel-track { cursor: grab; }
}
.svc-carousel.is-dragging .svc-carousel-track { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* Celular e tablet em pé: o orbe em cima, no meio; o texto embaixo e os losangos no pé, com espaço reservado.
   Deitado, o celular usa a tela dividida do computador (em cima, o orbe ficaria miúdo) */
@media (max-width: 860px) and (orientation: portrait) {
  .svc-carousel { --svc-orb: min(74vw, calc(var(--svc-stage) * .42), 26.25rem); --svc-base: 90deg; --svc-edge: 3rem; }
  .svc-orb { top: calc(.75rem + var(--svc-orb) / 2); left: 50%; }
  .svc-card { align-items: stretch; }
  /* O espaço dos losangos no pé sai de um texto um pouco mais junto (em cima e antes dos botões): o card segue da
     altura da janela em pt, en e es */
  .svc-carousel { --svc-dots-h: 2.5rem; }
  .svc-card-inner { display: flex; flex-direction: column; justify-content: center; padding: calc(1.375rem + var(--svc-orb)) var(--gutter) calc(var(--svc-dots-h) + .5rem); }
  .svc-card-inner > *, .svc-card-text { max-width: none; }
  .svc-card-acts { margin-top: 1.75rem; }
  /* No pé da 1ª tela; se o card crescer além dela (letra do sistema maior), descem junto com o pé do card, sem cair
     em cima do texto (a folga de 2 px ignora frações de px: com a letra padrão ficam onde sempre ficaram) */
  .svc-dots { left: 50%; top: max(calc(var(--svc-stage) - var(--svc-dots-h) - .25rem), calc(100% - var(--svc-dots-h) - .25rem - 2px)); }
}
/* Celular baixinho (ex.: 360 x 640, ou o iPhone no Safari com as barras e a letra de 17 px): orbe menor e texto
   mais junto, para o "Pedir orçamento" e os losangos caberem na 1ª tela */
@media (max-width: 860px) and (orientation: portrait) and (max-height: 740px) {
  .svc-carousel { --svc-orb: min(64vw, calc(var(--svc-stage) * .25)); }
  .svc-carousel { --svc-dots-h: 2.375rem; }
  .svc-card-inner { padding-top: calc(1.125rem + var(--svc-orb)); padding-bottom: calc(var(--svc-dots-h) + .25rem); }
  .svc-dots { top: max(calc(var(--svc-stage) - var(--svc-dots-h)), calc(100% - var(--svc-dots-h) - 2px)); }
  .svc-card-title { margin-top: .625rem; }
  .svc-card-text { margin-top: .75rem; }
  .svc-card-perks { margin-top: 1.125rem; gap: .375rem; }
  .svc-card-acts { margin-top: 1.125rem; }
}
/* Celular bem baixinho (ex.: 320 x 568, iPhone SE no Safari com as barras, 375 x 548): orbe e letra um pouco
   menores e tudo mais junto; o card continua com tudo (tipo, título, frase, os 3 itens e os botões) */
@media (max-width: 860px) and (orientation: portrait) and (max-height: 600px) {
  .svc-carousel { --svc-orb: min(56vw, calc(var(--svc-stage) * .19)); --svc-dots-h: 2.125rem; }
  .svc-card-inner { padding-top: calc(.75rem + var(--svc-orb)); padding-bottom: var(--svc-dots-h); }
  .svc-card-type { font-size: .9375rem; }
  .svc-card-title { font-size: 2.25rem; margin-top: .375rem; }
  .svc-card-text { font-size: 1rem; line-height: 1.4; margin-top: .5rem; }
  .svc-card-perks { margin-top: .75rem; gap: .25rem; }
  .svc-card-perks .perk { font-size: .9375rem; }
  .svc-card-acts { margin-top: .875rem; }
  .svc-card .btn { padding-block: .8125rem; }
}
/* Celular estreito (320 px): título um pouco menor, para o nome do serviço não quebrar em três linhas */
@media (max-width: 340px) {
  .svc-card-title { font-size: 2.3rem; }
}
@media (max-width: 860px) {
  .svc-card .btn-accent { box-shadow: 0 10px 22px -16px var(--btn-tone); }
}

/* Home do celular: a mesma tela, logo abaixo do título "Serviços sob medida.". Quando ela chega, o topo do site já
   saiu da janela: o card tem a altura da janela inteira, e o #servicos para com ele encostado em cima (o
   scroll-margin desconta o scroll-padding do html). A superfície nasce do fundo, em degradê também em cima */
.svc-carousel[data-home] {
  --svc-stage: 100svh;
  --svc-surface: color-mix(in srgb, var(--svc-glow) 5%, var(--color-panel-solid));
  scroll-margin-top: -24px;
  background: linear-gradient(transparent, var(--svc-surface) clamp(48px, 10vh, 96px), var(--svc-surface) calc(100% - var(--svc-foot)), transparent);
}
.home-svc { padding-bottom: .5rem; }
/* O orbe do topo passa por trás do título no caminho até o card (orb-morph.js) */
.home-svc h2 { position: relative; z-index: 3; margin-bottom: .75rem; }
/* O orbe do card e os losangos aparecem quando o orbe do topo chega (o --svc-morph vem do orb-morph.js; sem ele, 1) */
.svc-carousel[data-home] :is(.svc-orb, .svc-dots) { opacity: var(--svc-morph, 1); }
/* Enquanto o orbe do topo viaja até o card (orb-morph.js): ele fica por cima da superfície do card, não
   recebe toque (os losangos do card ficam embaixo dele) e as linhas de fundo do topo somem logo no começo */
.orb-wrap.is-morphing { z-index: 2; pointer-events: none; }
/* No celular, o "Orçamento" do topo já leva ao pedido e o orbe desce até os serviços: o topo fica só com o texto */
@media (max-width: 860px) { .hero-actions { display: none; } }
.orb-wrap.is-morphing::before { opacity: calc(1 - 3 * var(--orb-morph, 0)); }

/* Detalhes do serviço da vez, embaixo da tela dele. O nome do serviço abre os detalhes (quem desce já não vê o
   card) e o tom do serviço segue nos losangos e na faixa "Não está incluso" */
.svc-page { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
.svc-panel-title { font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: .75rem; }
.svc-panel-title::before { content: ""; display: inline-block; width: .3em; height: .3em; border: 1.5px solid var(--svc-tint); rotate: 45deg; margin: 0 .5em .2em .1875rem; vertical-align: middle; }
.svc-panel-title strong { font-weight: 600; }
.svc-panel { display: grid; gap: 1.375rem; padding-top: .75rem; scroll-margin-top: 24px; }
.svc-panel:focus-visible { outline: none; }
/* Blocos de cada serviço sem caixa: colunas soltas, título e um fio (o fundador achou o site "quadrado") */
.svc-panel .svc-detail { gap: 2.25rem 3rem; }
.svc-panel .svc-detail .item { border: 0; border-radius: 0; background: none; backdrop-filter: none; overflow: visible; }
.svc-panel .svc-detail .item-head { padding: 0 0 .625rem; border: 0; background: none; }
.svc-panel .svc-detail .item-body { padding: .875rem 0 0; border-top: 1px solid var(--color-line); }
.svc-panel .svc-detail .svc-h { font-size: 1.05rem; }
.svc-panel .svc-detail .item .perk::before { border-color: var(--svc-tint); }
/* "Não está incluso": faixa de cantos arredondados, num véu do tom do serviço */
.svc-out { padding: .875rem 1.125rem; border-radius: var(--radius); background: color-mix(in srgb, var(--svc-tint) 12%, transparent); color: var(--color-muted); }
.svc-out strong { color: var(--color-text); font-weight: 600; }
.svc-block { display: grid; gap: .875rem; }
.svc-block-title { font-size: 1.1rem; font-weight: 600; }
.svc-block .item-head h4 { font-size: 1.05rem; font-weight: 600; }
/* Troca de serviço: o painel novo se escreve da esquerda para a direita (a mesma janela de clip da vitrine) */
.svc-panel.is-entering { animation: svc-write .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes svc-write {
  from { clip-path: inset(-12px 100% -12px -12px); }
  to { clip-path: inset(-12px -12px -12px -12px); }
}
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.svc-detail .perks { margin-top: 0; padding-top: 0; border-top: 0; }
.svc-detail .item-body > p { margin-bottom: 0; }
.faq { display: grid; gap: 0; }
.faq > div { padding-block: 1.125rem; border-top: 1px solid var(--color-line); }
.faq > div:last-child { border-bottom: 1px solid var(--color-line); }
.faq dt { font-weight: 600; margin-bottom: .375rem; }
.faq dd { color: var(--color-muted); max-width: 45rem; }
@media (max-width: 860px) {
  .svc-detail { grid-template-columns: 1fr; }
}

/* Vitrine de produtos: um bloco por produto, texto à esquerda e a tela à direita (no celular, empilha) */
.prod { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3.5rem; align-items: center; padding-block: 4rem; border-top: 1px solid var(--color-line); }
.prod > * { min-width: 0; }
.prod h2 { font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: .75rem; }
.prod-desc { color: var(--color-muted); font-size: 1.1rem; max-width: 28.75rem; margin-bottom: 1.5rem; }
.prod-acts, .cs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
/* "Em breve": caixa pontilhada no lugar da imagem, como a da vitrine do celular */
.soon-box { display: grid; place-items: center; min-height: 15rem; border: 1px dashed var(--color-line-strong); border-radius: var(--radius); font-size: 1.1rem; color: var(--color-muted); }

/* Prévia do Salão na home (molde da antiga página longa de produto): topo com a tela, seções numeradas "01 · …" e o convite no fim.
   Os títulos aceitam dois níveis: na prévia da home eles descem um (h2→h3, h3→h4) */
.cs-hero { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3.5rem; align-items: center; padding-block: 4.5rem 2.5rem; }
.cs-hero > * { min-width: 0; }
.cs-hero :is(h1, h3) { font-weight: 500; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: .875rem; }
.cs-hero .lead { margin-bottom: 1.75rem; }
.cs-sec { padding-block: 4.5rem; border-top: 1px solid var(--color-line); }
/* Seções em sequência ficam juntas: sem a linha entre elas e com metade do respiro (pedido do fundador) */
.cs-sec + .cs-sec { border-top: 0; padding-top: .5rem; }
.cs-sec:has(+ .cs-sec) { padding-bottom: 2.5rem; }
.cs-sec > :is(h2, h3) { font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 47.5rem; margin-bottom: 1rem; }
.cs-text { color: var(--color-muted); font-size: 1.1rem; max-width: 40rem; }
/* Como funciona: um passo por linha, só texto (as telas estão na animação do topo e em salao.html), uma frase
   para o dono (funciona sem instalar, aguenta Wi-Fi caindo) e o link para a página do Salão */
.flow { list-style: none; margin-top: 1.5rem; }
.flow-step { padding-block: 1.5rem; border-top: 1px solid var(--color-line); }
.flow-step h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.flow-step p { color: var(--color-muted); font-size: 1.05rem; max-width: 30rem; }
.cs-note { margin-top: 1rem; color: var(--color-muted); max-width: 45rem; }
.pv-page { margin-top: 1.25rem; }
.cs-back { display: inline-block; margin-top: 1.75rem; padding-block: .5rem; font-size: .92rem; color: var(--color-muted); transition: color .15s; }
.cs-back:focus-visible { color: var(--color-text); }
@media (hover: hover) { .cs-back:hover { color: var(--color-text); } }
@media (max-width: 860px) {
  .prod, .cs-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .prod, .cs-sec { padding-block: 2.5rem; }
  .cs-sec + .cs-sec { padding-top: .25rem; }
  .cs-sec:has(+ .cs-sec) { padding-bottom: 1.75rem; }
  .cs-hero { padding-block: 2.25rem 1.5rem; }
  .soon-box { font-size: 1rem; min-height: 10rem; }
}

/* Privacidade e 404 */
.privacy-updated { margin-top: 1.125rem; font-size: .8rem; color: var(--color-muted); }
/* 404: o aviso fica no meio do espaço entre o topo e o rodapé */
main:has(> .notfound) { display: flex; flex-direction: column; }
.notfound { flex: 1; align-content: center; padding-block: 3rem; }
/* Celular: a página passa da altura da tela, então o aviso ganha altura própria para ocupar a primeira tela */
@media (max-width: 860px) { .notfound { min-height: min(60svh, 30rem); } }
.notfound .btn { margin-top: 1.75rem; }


/* ===== Home do computador: uma história ao rolar, como no celular ===============================================
   1. O topo (título grande, uma frase, o botão e o orbe animado), que ocupa a janela menos o cabeçalho e deixa
      aparecer o começo da próxima seção. 2. Serviços: o orbe do topo desce e vira o orbe do card, a mesma tela de
      services.html (orb-morph.js). 3. Produtos: o Salão, com a animação do pedido. 4. Projetos: os três projetos.
   Cada bloco: título, uma frase, uma demonstração e um link. Tudo em rem, então cresce com a tela (tokens.css) */
@media (min-width: 861px) {
  /* Topo: a janela menos o cabeçalho e uma fresta, onde já aparece o título de Serviços (convite para rolar) */
  .hero {
    --hero-peek: clamp(4.5rem, 11svh, 7.5rem);
    min-height: calc(100svh - var(--header-height) - 1px - var(--hero-peek));
    align-content: center;
  }
  .hero > div:first-child { padding-block: 2.5rem; max-width: min(40rem, 50%); }
  /* Título no mesmo corpo e peso do título do card de Serviços */
  .hero h1 { font-weight: 300; font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
  .hero h1 strong { font-weight: 600; }
  .hero .lead { font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.45; max-width: 28rem; margin: 1.5rem 0 2.5rem; text-wrap: pretty; }
  .hero-actions { gap: .75rem 1.75rem; }
  /* O orbe à direita, do meio da página até a borda da janela */
  .orb-wrap { left: 42%; }

  /* Título de cada bloco e a frase dele */
  .home-sec { padding-top: clamp(5rem, 12svh, 9rem); }
  .home-sec h2 { font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 1rem; }
  .home-sec-lead { color: var(--color-muted); font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.45; max-width: 40ch; margin-bottom: 2.5rem; text-wrap: pretty; }
  /* "Ver todos os serviços": sobe para o pé do card, que se funde com o fundo (o mesmo --svc-foot do card) */
  .home-sec-foot { position: relative; z-index: 2; margin-top: calc(-1 * clamp(4.5rem, 16vh, 10rem) + 1rem); pointer-events: none; }
  .home-sec-foot > * { pointer-events: auto; }

  /* Serviços: o título é o que aparece na fresta do topo; depois ele desce com o orbe (orb-morph.js) */
  .home-svc { padding-top: .75rem; }
  /* O card da home: um pouco menor que o de services.html, para a legenda (o título) caber embaixo dos losangos */
  .svc-carousel[data-home] { --svc-orb: min(40vw, calc(var(--svc-stage) * .66), 45rem); }

  /* Produtos: título, frase, botões à esquerda; a animação do pedido grande à direita. Os detalhes da prévia do
     celular (problema e passo a passo) ficam na página do Salão */
  .home-prod { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); grid-template-rows: auto auto 1fr; column-gap: clamp(2.5rem, 5vw, 7rem); align-items: start; }
  .home-prod > h2 { grid-column: 1; grid-row: 1; align-self: end; }
  .home-prod .salao-pv, .home-prod .salao-pv > .cs-hero { display: contents; }
  .home-prod .cs-hero > div { grid-column: 1; grid-row: 2; }
  .home-prod .cs-hero .lead { font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.45; max-width: 40ch; margin-bottom: 2.5rem; text-wrap: pretty; }
  .home-prod .cs-acts { gap: .75rem 1.75rem; }
  .home-prod .of { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  /* A animação ocupa a coluna, sem passar de ~70% da altura da janela (o palco tem ~36 em de altura) */
  .home-prod .of-stage { width: 100%; font-size: min(calc(100cqw / 52), calc(70svh / 36)); }
  .home-prod .cs-sec, .home-prod .pv-toggle, .home-prod .pv-all { display: none !important; }

  /* Projetos: três fichas lado a lado, cada uma no tom do projeto, e o portfólio embaixo */
  .proj-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 2rem); margin-bottom: 1.5rem; }
  .proj-card {
    --tone: var(--color-accent);
    position: relative; display: flex; flex-direction: column; gap: .9rem;
    padding: clamp(1.5rem, 2.2vw, 2.5rem) clamp(1.25rem, 2vw, 2.25rem) 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent); border-radius: var(--radius);
    background: linear-gradient(color-mix(in srgb, var(--tone) 7%, var(--color-panel-solid)), var(--color-panel-solid) 70%);
    transition: border-color .2s, box-shadow .25s, translate .25s;
  }
  .proj-card[data-tone="nucleus"] { --tone: var(--color-exotic); }
  .proj-card[data-tone="field"] { --tone: var(--color-partner); }
  .proj-card h3 { font-weight: 500; font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; margin-top: .25rem; text-wrap: balance; }
  .proj-card p { color: var(--color-muted); max-width: 40ch; text-wrap: pretty; }
  .proj-card .chips { margin-top: auto; padding-top: .5rem; }
  .proj-card-link { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--color-line); font-size: .92rem; font-weight: 500; }
  /* A ficha inteira é o link (o foco continua no link) */
  .proj-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .proj-card:hover, .proj-card:focus-within { border-color: var(--tone); box-shadow: 0 18px 50px -24px var(--tone); translate: 0 -3px; }
  .proj-card:hover .proj-card-link, .proj-card-link:focus-visible { color: var(--tone); }
  .home-projects { padding-bottom: 0; }
  /* Links com seta no fim dos blocos: o texto alinha com a borda do conteúdo (o link tem folga lateral) */
  .home-sec-foot > .home-link, .home-projects > .home-link { margin-left: -.25rem; }
}

/* Projetos: link do cartão da coleta em campo para a página do produto (campo.html) */
.project-more { margin-top: .75rem; padding-inline: 0; }