/*
 * style-services.css
 * Estilos das páginas internas: /servicos, /servico/{slug}, /sobre, /projeto/{slug}
 * Carregado em adição ao style.css principal
 */

/* Hairline entre secções mais presente (a de base no style.css era ténue de
   mais e perdia-se quando as secções têm o mesmo fundo). Carrega depois do
   style.css, por isso ganha por ordem de origem. */
.section-divider::before {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklch, var(--acc) 42%, transparent) 15%,
    color-mix(in oklch, var(--acc) 42%, transparent) 85%,
    transparent);
}

/* Página Sobre: ritmo uniforme de 100px de cada lado de cada hairline. As
   secções sobre-* usavam os valores por defeito (92px / 58px), o que deixava
   as linhas descentradas. Iguala-se ao ritmo das secções srv-* (que já usam
   100px). O "antes" da hairline é o padding-bottom da secção anterior; o
   "depois" é a margem da própria ::before. */
.sobre-path.section-divider,
.sobre-marcantes.section-divider,
.sobre-pessoal.section-divider,
.sobre-cta-final.section-divider {
  padding-bottom: 100px;
}
.sobre-path.section-divider::before,
.sobre-marcantes.section-divider::before,
.sobre-pessoal.section-divider::before,
.sobre-cta-final.section-divider::before {
  margin-bottom: 100px;
}

/* =====================================================================
   TOKENS — Páginas de serviços (Fase 1 do redesign 2026-06)
   ===================================================================== */

:root {
  /* Categoria → cor accent secundária */
  --cat-media:      oklch(60% 0.20 320);   /* magenta/roxo — vídeo, foto */
  /* Única excepção à regra "sem dourado": a cor de categoria do design mantém
     o dourado por decisão do cliente (valor fixo; --acc-gold é agora azul). */
  --cat-design:     #c9a84c;               /* dourado — design gráfico, branding */
  --cat-tech:       var(--acc);            /* azul eléctrico — web, IT */
  --cat-consulting: oklch(70% 0.10 75);    /* warm neutro — consultoria */

  /* Tipografia páginas internas */
  --text-svc-num:    clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --text-svc-title:  clamp(2.5rem, 1rem + 8vw, 7.5rem);
  --text-svc-sub:    clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);

  /* Espaçamentos cinemáticos */
  --space-svc-hero-y:  clamp(6rem, 4rem + 8vw, 14rem);
  --space-svc-section: clamp(5rem, 3rem + 6vw, 12rem);

  /* Motion — easings + durações */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       180ms;
  --dur-normal:     320ms;
  --dur-slow:       600ms;
  --dur-cinematic:  900ms;
}

/* Helper class para aplicar cor da categoria via data-category attribute no body/secção.
   Valores correspondem ao campo filter_tag da tabela services. */
[data-category="tech"]       { --svc-accent: var(--cat-tech); }
[data-category="design"]     { --svc-accent: var(--cat-design); }
[data-category="media"]      { --svc-accent: var(--cat-media); }
[data-category="consulting"] { --svc-accent: var(--cat-consulting); }

/* ══════════════════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS — Componentes partilhados
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ──────────────────────────────────────────────────────────────── */
.page-breadcrumb { padding: 100px 0 0; }
.breadcrumb-nav { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text3); flex-wrap: wrap; }
.breadcrumb-nav a { color: var(--text2); transition: color .2s; }
.breadcrumb-nav a:hover { color: var(--acc); }
.bc-sep { color: var(--text3); opacity: .5; }
.bc-current { color: var(--text); font-weight: 500; }

/* ── Página índice de serviços ───────────────────────────────────────────────── */
.srv-index-hero { padding: 2rem 0 0; }
.srv-index-hero-content { text-align: center; max-width: 700px; margin: 0 auto; }
.srv-index-hero-content h1 { font-size: clamp(2rem, 1rem + 4vw, 3.5rem); margin-bottom: .75rem; }
.srv-index-hero-content p { color: var(--text2); font-size: 1.1rem; }

.srv-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem; padding: 1rem 0;
}
.srv-index-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: var(--bgcard); border: 1px solid var(--border);
  border-radius: var(--r14); padding: 1.75rem;
  transition: var(--transition); text-decoration: none;
}
.srv-index-card:hover {
  border-color: var(--acc); transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(32,136,202,.1);
}
.srv-index-card-content h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.srv-index-card-content p { font-size: .9rem; color: var(--text2); line-height: 1.6; }
.srv-index-price {
  display: inline-block; margin-top: .75rem; padding: .3rem .75rem;
  background: rgba(32,136,202,.1); color: var(--acc); border-radius: 20px;
  font-size: .8rem; font-weight: 600;
}
.srv-index-arrow {
  font-size: 1.5rem; color: var(--acc); flex-shrink: 0;
  transition: transform .3s;
}
.srv-index-card:hover .srv-index-arrow { transform: translateX(4px); }

/* ── Página individual de serviço ────────────────────────────────────────────── */
.srv-page-hero { padding: 2rem 0 1rem; }
.srv-page-hero-content { max-width: 820px; }

/* Eyebrow (pre-headline com nome do serviço) */
.srv-eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc-gold);
  margin-bottom: 1rem;
  font-family: var(--font-display), sans-serif;
}

.srv-page-hero-content h1 {
  font-size: clamp(2.2rem, 1rem + 4.5vw, 3.8rem);
  margin-bottom: 1rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
}

/* Sub-headline universal */
.srv-page-subhead {
  font-size: 1.1rem;
  color: var(--text3);
  font-style: italic;
  margin-bottom: 1.25rem;
  font-weight: 400;
}

.srv-page-desc { color: var(--text2); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.75rem; max-width: 700px; }

/* CTAs do hero */
.srv-hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* Micro-trust sob CTAs */
.srv-micro-trust {
  font-size: .85rem;
  color: var(--text3);
  letter-spacing: .03em;
  margin-bottom: 1.5rem;
  font-family: var(--font-display), sans-serif;
  font-weight: 500;
}

/* Bloco de credibilidade */
.srv-page-credibility { padding-top: 2rem; }
.srv-credibility-box {
  max-width: 820px;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, rgba(32,136,202,.06), rgba(32,136,202,.04));
  border: 1px solid var(--border-premium, rgba(32,136,202,.18));
  border-radius: var(--r14);
  border-left: 3px solid var(--acc-gold);
}
.srv-credibility-box p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  font-weight: 500;
}

/* Processo universal (4 passos) */
.srv-page-process .section-header h2 { font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); }
.srv-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.srv-process-step {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--bgcard);
  border: 1px solid var(--border);
  border-radius: var(--r14);
  transition: var(--transition);
}
.srv-process-step:hover {
  border-color: rgba(32,136,202,.3);
  transform: translateY(-2px);
}
.srv-process-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--acc-gold);
  font-family: var(--font-display), sans-serif;
  letter-spacing: -.02em;
  margin-bottom: .75rem;
  line-height: 1;
}
.srv-process-step h3 {
  font-size: 1.1rem;
  margin-bottom: .6rem;
  font-weight: 700;
}
.srv-process-step p {
  font-size: .9rem;
  color: var(--text2);
  line-height: 1.6;
  margin: 0;
}
.srv-page-price {
  display: inline-flex; align-items: baseline; gap: .5rem;
  margin-bottom: 1.5rem; padding: .6rem 1.25rem;
  background: rgba(32,136,202,.08); border: 1px solid var(--border-premium);
  border-radius: var(--r14);
}
.srv-price-label { font-size: .85rem; color: var(--text3); }
.srv-price-value { font-size: 1.5rem; font-weight: 700; color: var(--acc-gold); font-family: var(--font-display), sans-serif; }

/* Sub-serviços grid */
.srv-page-items h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }
.srv-page-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.srv-page-item {
  background: var(--bgcard); border: 1px solid var(--border);
  border-radius: var(--r14); padding: 1.5rem;
  transition: border-color .3s;
}
.srv-page-item:hover { border-color: rgba(32,136,202,.25); }
.srv-page-item-icon { font-size: 1.5rem; margin-bottom: .75rem; }
.srv-page-item h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.srv-page-item p { font-size: .9rem; color: var(--text2); line-height: 1.6; }

/* Projectos relacionados */
.srv-page-projects {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.srv-project-card {
  display: block; border-radius: var(--r14); overflow: hidden;
  background: var(--bgcard); border: 1px solid var(--border);
  transition: var(--transition); text-decoration: none;
}
.srv-project-card:hover { border-color: var(--acc); transform: translateY(-3px); }
.srv-project-img {
  height: 180px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.srv-project-img img,
.srv-project-img video { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* Logótipos: contain sobre a cor de marca, com respiro (nao cropar/esticar). */
.srv-project-img.is-logo img {
  object-fit: contain;
  width: auto; max-width: 72%; max-height: 68%;
}
.srv-project-card:hover .srv-project-img img,
.srv-project-card:hover .srv-project-img video { transform: scale(1.05); }
.srv-project-info { padding: 1rem 1.25rem; }
.srv-project-cat { font-size: .75rem; color: var(--acc); text-transform: uppercase; letter-spacing: .06em; }
.srv-project-info h3 { font-size: 1rem; margin-top: .25rem; }

/* ============================================================
   FAQ Motion (port de motion-faqs-accordion.tsx para vanilla)
   Feel premium: pill cards, spring easing, toggle +/-,
   scale breathing, height medida via scrollHeight.
   ============================================================ */
.srv-page-faq .faq-list.faq-motion {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 34px;
}
.srv-page-faq .faq-motion .faq-item {
  border-radius: 30px;
  border: 1px solid var(--border);
  background: var(--bgcard);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin: 0;
  overflow: hidden;
  transform: scale(.985);
  transform-origin: 50% 0%;
  transition:
    transform .55s cubic-bezier(.22,1.2,.36,1),
    border-color .4s ease,
    box-shadow .4s ease,
    background .4s ease;
}
.srv-page-faq .faq-motion .faq-item.open {
  transform: scale(1);
  border-color: color-mix(in oklch, var(--acc) 22%, var(--border));
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
/* Estado "algo está aberto" — items não abertos ficam esbatidos */
.srv-page-faq .faq-motion:has(.faq-item.open) .faq-item:not(.open):not(:hover) {
  opacity: 0.48;
  transform: scale(.97);
}
/* Hover destaca o item apontado e esbate os restantes */
.srv-page-faq .faq-motion:hover .faq-item:not(:hover):not(.open) {
  opacity: 0.48;
  transform: scale(.97);
}
.srv-page-faq .faq-motion:hover .faq-item:not(:hover).open {
  opacity: 0.82;
}
.srv-page-faq .faq-motion .faq-item:hover {
  border-color: color-mix(in oklch, var(--acc) 32%, var(--border));
  box-shadow: 0 10px 32px rgba(0,0,0,.16);
  transform: scale(1);
  opacity: 1;
}
.srv-page-faq .faq-motion .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.srv-page-faq .faq-motion .faq-q:hover { background: transparent; }
.srv-page-faq .faq-motion .faq-q-text { flex: 1; }
.srv-page-faq .faq-motion .faq-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: transparent;
  transition:
    transform .5s cubic-bezier(.22,1.2,.36,1),
    background .35s ease,
    color .35s ease;
}
.srv-page-faq .faq-motion .faq-item.open .faq-toggle {
  transform: rotate(180deg) scale(1.05);
  background: color-mix(in oklch, var(--acc) 14%, transparent);
  color: var(--acc);
}
.srv-page-faq .faq-motion .faq-icon-minus { display: none; }
.srv-page-faq .faq-motion .faq-item.open .faq-icon-plus { display: none; }
.srv-page-faq .faq-motion .faq-item.open .faq-icon-minus { display: block; }
.srv-page-faq .faq-motion .faq-a {
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  max-height: none;
  transition:
    height .6s cubic-bezier(.22,1.2,.36,1),
    opacity .3s ease;
}
.srv-page-faq .faq-motion .faq-item.open .faq-a {
  height: var(--faq-h, auto);
  opacity: 1;
}
.srv-page-faq .faq-motion .faq-a-inner {
  padding: 0 28px 24px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: color-mix(in oklch, var(--text) 75%, transparent);
  transform: translateY(-8px);
  transition: transform .55s cubic-bezier(.22,1.2,.36,1);
}
.srv-page-faq .faq-motion .faq-item.open .faq-a-inner {
  transform: translateY(0);
}
@media (max-width: 640px) {
  .srv-page-faq .faq-motion .faq-q { padding: 18px 20px; }
  .srv-page-faq .faq-motion .faq-a-inner { padding: 0 22px 22px; }
  .srv-page-faq .faq-motion .faq-toggle { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .srv-page-faq .faq-motion .faq-item,
  .srv-page-faq .faq-motion .faq-toggle,
  .srv-page-faq .faq-motion .faq-a,
  .srv-page-faq .faq-motion .faq-a-inner { transition-duration: .15s; }
  .srv-page-faq .faq-motion .faq-item { transform: none; }
}

/* CTA box (legado — usado por sobre.php, servicos.php etc. Manter) */
.srv-cta-box {
  text-align: center; padding: 3rem 2rem;
  background: var(--bgcard); border: 1px solid var(--border);
  border-radius: var(--r22);
}
.srv-cta-box h2 { font-size: clamp(1.4rem, 1rem + 2vw, 2rem); margin-bottom: .75rem; }
.srv-cta-box p { color: var(--text2); margin-bottom: 1.5rem; max-width: 500px; margin-inline: auto; }
.srv-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Página individual de portfólio ─────────────────────────────────────────── */
/* Folga de topo para o cabeçalho fixo não sobrepor a imagem de destaque */
/* Respiro em baixo para os botões não colarem à hairline da secção seguinte. */
.proj-page-hero { padding: clamp(104px, 13vh, 150px) 0 clamp(3rem, 2rem + 3vw, 5rem); }
.proj-hero-layout {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem; align-items: center;
}
.proj-hero-visual {
  border-radius: var(--r22); overflow: hidden;
  aspect-ratio: 16 / 10; position: relative;
  background: var(--bgcard);
}
.proj-hero-media {
  width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: var(--r22);
}
/* Logótipo: contain sobre a cor da marca, com respiro (nunca cortar/esticar). */
.proj-hero-visual.is-logo { display: flex; align-items: center; justify-content: center; }
.proj-hero-visual.is-logo .proj-hero-media {
  object-fit: contain;
  width: auto; height: auto;
  max-width: 72%; max-height: 70%;
  border-radius: 0;
}
.proj-hero-placeholder {
  display: flex; align-items: center; justify-content: center;
}
.proj-hero-emoji { font-size: 4rem; }
.proj-hero-info h1 {
  font-size: clamp(1.6rem, 1rem + 3vw, 2.8rem);
  margin-bottom: 1rem; line-height: 1.15;
}
.proj-meta {
  display: flex; flex-direction: column; gap: .25rem;
  margin-bottom: 1.25rem; padding: 1rem 1.25rem;
  background: var(--bgcard); border: 1px solid var(--border);
  border-radius: var(--r14);
}
.proj-meta-label { font-size: .75rem; color: var(--acc); text-transform: uppercase; letter-spacing: .06em; }
.proj-meta-value { font-size: .95rem; color: var(--text2); }
.proj-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* Descrição do projecto */
.proj-about-content { max-width: 800px; }
.proj-about-content h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.proj-about-text { font-size: 1.05rem; color: var(--text2); line-height: 1.8; }

/* Galeria do projecto */
.proj-page-gallery h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.proj-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.proj-gallery-item {
  border-radius: var(--r14); overflow: hidden;
  aspect-ratio: 16 / 10; display: block;
  transition: var(--transition);
}
.proj-gallery-item:hover { transform: translateY(-3px); box-shadow: 0 12px 40px var(--shadow); }
.proj-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s;
}
.proj-gallery-item:hover img { transform: scale(1.05); }

/* ── Responsivo ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .srv-cards { grid-template-columns: 1fr; }
  .srv-index-card { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .srv-page-grid { grid-template-columns: 1fr; }
  .srv-page-projects { grid-template-columns: 1fr; }
  .page-breadcrumb { padding-top: 80px; }
  .proj-hero-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .proj-gallery-grid { grid-template-columns: 1fr; }
}

/* ── Página Sobre — hero de partículas ─────────────────────────────────────────
   A secção usa também .hero-cinematic.hero-value, pelo que herda da homepage a
   altura, o fundo, o gradiente do ::before e todo o lettering (kicker, h1 com
   .grad em Instrument Serif, audience, proofline, botões). Aqui só tratamos da
   camada de partículas e de deixar o rato chegar ao canvas. */
/* Camadas do hero (de trás para a frente):
   0 = scrim/gradientes  ·  1 = fotografia em partículas  ·  2 = fade inferior  ·  3 = texto
   A fotografia fica À FRENTE dos gradientes, para não ser escurecida por eles. */
.sobre-hero { position: relative; overflow: hidden; }
/* Scrim: só serve o texto (fica atrás da fotografia). Mantém os tons do hero da homepage. */
.sobre-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 20%, rgba(82,154,209,.18), transparent 36%),
    /* blob inferior esquerdo, em azul (antes era branco) */
    radial-gradient(circle at 18% 78%, rgba(32,136,202,.22), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.93) 24%, rgba(0,0,0,.6) 42%, rgba(0,0,0,.2) 56%, transparent 66%),
    linear-gradient(180deg, transparent 0%, transparent 74%, rgba(0,0,0,.55) 90%, rgba(0,0,0,.94) 100%);
}
.sobre-hero-particles { position: absolute; inset: 0; z-index: 1; }
.sobre-hero-particles canvas { position: absolute; inset: 0; display: block; }
/* Fallback Firefox/Safari: a foto ocupa o FUNDO do hero, ligeiramente alinhada
   à direita — a mesma composição das partículas WebGL no Chrome (figura à
   direita, texto à esquerda). O fundo da foto já é escuro, funde com o hero;
   a máscara à esquerda garante a legibilidade do texto. */
.sobre-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  /* Metade da dimensão anterior (ocupava o hero todo) e encostada 25% mais à
     direita: fica na metade direita, ancorada ao bordo. */
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: .85;
  /* Fusão suave com o fundo do hero no bordo esquerdo da foto. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 18%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 18%, #000 45%);
}
@media (max-width: 900px) {
  /* Em ecrã estreito fica um fundo ténue a toda a largura, atrás do texto. */
  .sobre-hero-photo {
    width: 100%;
    object-position: center top;
    opacity: .25;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* Único escurecimento sobre a fotografia: fade de baixo para cima nos últimos 15%. */
.sobre-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0,0,0,.82) 38%, transparent 100%);
}
/* A coluna vazia da grelha deixa passar o rato para as partículas, mas o bloco de
   texto recupera os eventos para poder ser selecionado e os botões clicados. */
.sobre-hero .container { position: relative; z-index: 3; pointer-events: none; }
.sobre-hero .hero-text { pointer-events: auto; }
/* Desktop: aproveitar o espaço à esquerda sem chegar à fotografia */
.sobre-hero .hero-grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); align-items: center; }
.sobre-hero .hero-text { max-width: 760px; }
/* O texto escala com largura E altura do ecrã: a fotografia é dimensionada a
   partir da altura do hero, por isso o texto tem de acompanhar as duas, senão
   em ecrãs grandes o texto estagna e a figura parece desproporcionada. */
.sobre-hero .hero-text h1 {
  font-size: clamp(2.8rem, 4.2vw + 1.6vh, 8.5rem);
  line-height: .92;
  letter-spacing: -.04em;
  max-width: 15ch;
  margin-bottom: clamp(20px, 1.4vw + .6vh, 40px);
}
/* O .grad usa background-clip:text: o gradiente só pinta dentro da caixa do span.
   Com line-height apertado as descidas (g, p, j) caíam fora e ficavam cortadas. */
.sobre-hero .hero-text h1 .grad { padding-bottom: .14em; }

/* Hover dos botões do hero: "Apresentar Projeto" fica azul com texto branco;
   "Combinar Reunião" ganha o efeito e a borda azuis, mantendo o texto branco.
   (style-services.css carrega depois do global, por isso ganha no hover.) */
.sobre-hero .btn-primary:hover {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 12px 34px rgba(32,136,202,.45);
}
.sobre-hero .btn-outline:hover {
  background: color-mix(in oklch, var(--acc) 18%, transparent);
  border-color: var(--acc);
  color: #fff;
}
.sobre-hero .hero-audience {
  max-width: 40ch;
  font-size: clamp(1.15rem, .8vw + .5vh, 2.3rem);
  padding-left: 0;          /* sem a barra vertical nesta página */
}
.sobre-hero .hero-audience::before { display: none; }
.sobre-hero .hero-proofline {
  max-width: 52ch;
  font-size: clamp(1rem, .35vw + .3vh, 1.35rem);
}
@media (max-width: 900px) {
  /* Mobile: composição vertical - fotografia em cima (em fluxo, já não é fundo),
     texto completo por baixo. A figura é ancorada ao topo e mostra ~60% da sua
     altura (ver data-mobile-fit em particles-hero.js), com um fade no remate. */
  .sobre-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    /* espaçamentos apertados para os botões caberem no primeiro ecrã */
    padding: 76px 0 40px;
  }
  .sobre-hero-particles {
    position: relative;
    inset: auto;
    width: 100%;
    height: 30vh;
    margin-bottom: clamp(12px, 2vh, 22px);
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  }
  /* o texto já não passa por cima da foto: scrim simples e sem fade inferior */
  .sobre-hero::before {
    background:
      radial-gradient(circle at 72% 12%, rgba(82,154,209,.16), transparent 42%),
      radial-gradient(circle at 12% 88%, rgba(32,136,202,.14), transparent 38%);
  }
  .sobre-hero::after { display: none; }
  .sobre-hero .hero-grid { grid-template-columns: 1fr; }
  .sobre-hero .hero-text,
  .sobre-hero .hero-text h1 { max-width: 100%; }
  .sobre-hero .hero-text h1 {
    font-size: clamp(1.9rem, 7.2vw, 2.7rem);
    line-height: .96;
    margin-bottom: 14px;
  }
  .sobre-hero .hero-audience {
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    margin-bottom: 12px;
  }
  .sobre-hero .hero-proofline {
    font-size: clamp(.9rem, 3.6vw, 1rem);
    line-height: 1.5;
    margin-bottom: 20px;
  }
}

/* ── Sobre — O percurso: timeline horizontal com scroll NATIVO ──────────────
   Sem GSAP, sem pin, sem pin-spacer. A altura do passo é fixa e o conteúdo
   distribui-se numa grelha de 3 linhas (slot / nó / slot), pelo que não há
   nenhuma medida dependente do viewport a precisar de ser sincronizada: é
   imune ao resize. Foto e texto ficam em lados opostos do fio, alternando. */
.sobre-path {
  --step-w: clamp(360px, 40vw, 600px);
  /* A altura do passo nunca pode passar o espaço que sobra sob o cabeçalho,
     senão o overflow:hidden do sticky corta a base da timeline. Reserva-se
     ~215px para cabeçalho + gap + respiração (com margem para o texto quebrar
     em ecrãs estreitos). Em ecrãs altos é o clamp que manda e a foto cresce. */
  --step-h: min(clamp(500px, 80vh, 830px), calc(100vh - 215px));
  --gap: clamp(24px, 3vw, 48px);
  --node: 34px;
  --edge: max(1.25rem, calc(50vw - var(--step-w) / 2));
  /* --steps vem do PHP (inline). A largura do track e o comprimento do scroll
     são calculados em CSS, por isso o browser recalcula-os sozinho no resize:
     não há nenhuma medida em JS a poder ficar dessincronizada (era o que fazia
     o pin do ScrollTrigger colapsar). */
  --track-w: calc(var(--step-w) * var(--steps) + var(--gap) * (var(--steps) - 1) + var(--edge) * 2);
  --scroll-len: max(0px, calc(var(--track-w) - 100vw));
  position: relative;
  height: calc(100vh + var(--scroll-len));
}
/* O conteúdo cola-se ao topo enquanto a secção alta rola por baixo: é o sticky
   nativo a fazer o trabalho do pin, sem pin-spacer nem clonagem. */
.sobre-path-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Cabeçalho e timeline centrados como um grupo, com um gap curto entre eles:
     o título fica logo por cima da timeline (não afastado), e a timeline, alta,
     domina o resto do ecrã. */
  justify-content: center;
  gap: clamp(14px, 2.5vh, 28px);
  padding: clamp(1rem, 3vh, 2rem) 0;
}
/* ── Cabeçalho do percurso ─────────────────────────────────────────────────
   Painel alinhado à esquerda, como um mostrador: sobrancelha em mono, título
   com a mesma escala do resto do site (.section-header) e o lettering do hero,
   e um medidor que acompanha o scroll. */
.sobre-path-head {
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: clamp(.35rem, 1vh, .6rem);
}
.sobre-path-eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text3);
}
.sobre-path-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--acc) 60%, transparent);
  animation: sobre-path-pulse 2.8s ease-out infinite;
}
@keyframes sobre-path-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--acc) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in oklch, var(--acc) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--acc) 0%, transparent); }
}
/* Mesma escala do .section-header do resto do site, para o Percurso deixar de
   ser o único título fora do sistema. */
.sobre-path-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.08;
}
/* O .grad pinta com background-clip: text, que só pinta dentro da caixa do
   span: sem esta folga o "p" de "percurso" sai cortado (mesmo problema do
   "g" de "giras" no hero). */
.sobre-path-head h2 .grad { padding-bottom: .14em; }
.sobre-path-lead {
  margin: 0;
  max-width: 52ch;
  color: var(--text2);
  line-height: 1.6;
}

/* Medidor: barra + contador. Acompanha o scroll horizontal e serve de dica
   de que a secção anda para o lado. */
.sobre-path-meter {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: clamp(.4rem, 1.4vh, .9rem);
}
.sobre-path-count {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text3);
}
.sobre-path-count-now { color: var(--acc); font-weight: 700; }
.sobre-path-count-sep { opacity: .5; }

/* Indicacao de scroll horizontal: escondida no desktop (ha hover/drag obvio),
   visivel em mobile com uma seta a deslizar. */
.sobre-path-hint {
  display: none;
  align-items: center;
  gap: .5rem;
  margin: .6rem 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
}
.sobre-path-hint-arrows {
  display: inline-flex;
  color: var(--acc);
  animation: sobre-path-hint-slide 1.4s ease-in-out infinite;
}
.sobre-path-hint-arrows svg { width: 20px; height: 20px; display: block; }
@keyframes sobre-path-hint-slide {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%      { transform: translateX(6px); opacity: 1; }
}
@media (max-width: 768px) {
  .sobre-path-hint { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .sobre-path-hint-arrows { animation: none; }
}

.sobre-path-viewport { position: relative; }
.sobre-path-track {
  position: relative;
  display: flex;
  gap: var(--gap);
  align-items: stretch;
  list-style: none;
  margin: 0;
  /* folga nas pontas: o primeiro e o último passo ficam centrados no ecrã */
  padding: 0 var(--edge);
  width: max-content;
  will-change: transform;
}
.sobre-path-track:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }

/* Fio SVG: cobre todo o track por trás dos passos. O viewBox é definido por JS
   (coordenadas em px do track), com preserveAspectRatio="none". */
.sobre-path-line {
  position: absolute;
  left: 0;
  top: 0;
  /* largura/altura são definidas por JS (= dimensão total do track), para o
     fio cobrir todo o percurso e acompanhar o scroll nativo em mobile. */
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.sobre-path-line-base {
  stroke: var(--border);
  stroke-width: 2;
  stroke-linecap: round;
}
/* linha de progresso: acende a azul e "desenha-se" com o scroll (dasharray no JS) */
.sobre-path-line-prog {
  stroke: var(--acc);
  stroke-width: 3;
  stroke-linecap: round;
  /* Sem drop-shadow nem transition: a linha desenha-se via stroke-dashoffset
     atualizado a cada frame pelo JS. Um filtro SVG recalculado por frame + uma
     transition contínua por cima causavam jank pesado em Firefox e Safari (o
     efeito de "mais rápido que o scroll"). O JS já limita a cadência. */
}
/* os passos ficam acima do fio */
.sobre-path-step { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .sobre-path-line-prog { transition: none; }
}

.sobre-path-step {
  position: relative;
  flex: 0 0 var(--step-w);
  height: var(--step-h);
  display: grid;
  /* slot de cima | nó | slot de baixo. minmax(0,1fr) força as duas metades a
     serem SEMPRE iguais: sem isto, um texto ou foto maior empurrava a linha do
     meio (o nó) para fora do centro, e o nó saía da linha reta da timeline. */
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  /* conteúdo (foto, nó, texto) centrado no cartão: o nó fica no eixo central,
     por isso a linha liga centro de cartão a centro de cartão. */
  justify-items: center;
  gap: clamp(12px, 1.6vh, 20px);
}
/* O esbatimento de foco incide só na foto e no texto, NUNCA no nó: se o passo
   inteiro levasse opacity, o círculo azul (dentro dele) ficava esbatido a 32%
   e destoava da linha, que está a 100%. O nó fica sempre a 100%, por isso o
   ponto alcançado tem exactamente a mesma cor da linha. */
.sobre-th-photo,
.sobre-th-body {
  opacity: .32;
  transition: opacity .5s ease;
}
.sobre-path-step.is-in .sobre-th-photo,
.sobre-path-step.is-in .sobre-th-body { opacity: 1; }
/* Fio contínuo e curvo desenhado em SVG (ver .sobre-path-line). Passa por trás
   dos nós, ligando sempre todos os pontos ponta a ponta. */

/* Foto e texto em lados OPOSTOS do fio, a alternar de passo para passo */
.sobre-path-step > .sobre-th-photo { grid-row: 1; align-self: end; }
.sobre-path-step > .sobre-th-node  { grid-row: 2; }
.sobre-path-step > .sobre-th-body  { grid-row: 3; align-self: start; }
.sobre-path-step:nth-child(even) > .sobre-th-photo { grid-row: 3; align-self: start; }
.sobre-path-step:nth-child(even) > .sobre-th-body  { grid-row: 1; align-self: end; }
/* Texto com largura próxima da foto, centrado no eixo do nó */
.sobre-th-body { max-width: min(100%, 46ch); text-align: left; }

/* Nó sobre o fio. overflow:hidden + border-radius recorta o miolo ao círculo,
   por isso, quando este cresce a transbordar, preenche o nó por completo sem
   deixar o anel de falha que sobrava com uma escala certinha. */
.sobre-th-node {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg2);
  overflow: hidden;
  transition: border-color .45s ease, box-shadow .45s ease;
}
.sobre-th-node::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text3);
  transition: background .45s ease, transform .45s ease;
}
/* O ponto só se destaca quando a linha desenhada o alcança (classe is-reached,
   controlada por JS a partir do progresso do fio). Aí preenche por completo:
   o miolo cresce a transbordar e o recorte circular do nó garante fill total. */
.sobre-path-step.is-reached .sobre-th-node {
  border-color: var(--acc);
  box-shadow: 0 0 14px color-mix(in oklch, var(--acc) 50%, transparent);
}
.sobre-path-step.is-reached .sobre-th-node::after {
  background: var(--acc);
  transform: scale(6);
}

/* Fotografia: limitada pelo slot (nunca é cortada), hover destaca e mexe */
.sobre-th-photo {
  display: block;
  /* A foto enche a altura do slot e a proporção define a largura. Sem uma
     dimensão definida, o justify-items:center do cartão colapsava-a. */
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg2);
  cursor: pointer;
  transition: transform .45s var(--ease-cinematic, cubic-bezier(.16,1,.3,1)),
              border-color .35s ease, box-shadow .45s ease;
}
.sobre-th-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-cinematic, cubic-bezier(.16,1,.3,1)); }
.sobre-th-photo:hover,
.sobre-th-photo:focus-visible {
  transform: translateY(-6px) scale(1.02);
  border-color: color-mix(in oklch, var(--acc) 50%, var(--border));
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.sobre-th-photo:hover img { transform: scale(1.06); }
.sobre-th-photo-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--text3);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px);
}

.sobre-th-year {
  display: block;
  margin: 0 0 .3rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  transition: color .45s ease;
}
.sobre-path-step.is-in .sobre-th-year { color: var(--acc); }
.sobre-th-title { font-size: clamp(1.32rem, 1.1rem + .66vw, 1.87rem); line-height: 1.22; margin: 0 0 .5rem; }
/* teaser: o texto completo aparece no modo ampliado */
.sobre-th-desc {
  color: var(--text2);
  line-height: 1.62;
  margin: 0;
  font-size: clamp(1.1rem, 1.05rem + .22vw, 1.23rem);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sobre-th-link { display: inline-block; margin-top: .7rem; color: var(--acc); text-decoration: none; font-size: .95rem; font-weight: 600; }
.sobre-th-link:hover { text-decoration: underline; }

/* Abaixo de 900px não prendemos o scroll: a secção volta a ter altura normal e
   o track passa a ser um scroller horizontal nativo, arrastado com o dedo.
   O mesmo caminho serve quem pediu menos movimento. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .sobre-path { height: auto; }
  .sobre-path-sticky { position: static; height: auto; overflow: visible; padding: var(--sp-section, 5rem) 0; }
  .sobre-path-track {
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--acc) 45%, transparent) transparent;
    transform: none !important;
    will-change: auto;
  }
  .sobre-path-track::-webkit-scrollbar { height: 6px; }
  .sobre-path-track::-webkit-scrollbar-track { background: transparent; }
  .sobre-path-track::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--acc) 40%, transparent);
    border-radius: 99px;
  }
  .sobre-path-step { scroll-snap-align: center; }
}
@media (max-width: 760px) {
  .sobre-path { --step-w: min(78vw, 320px); --step-h: clamp(420px, 68vh, 540px); }
}
/* Firefox/Safari (classe posta por JS): o scroll-linked transform da timeline
   fica "aos soluços" nestes browsers, por isso usa-se o MESMO scroller
   horizontal nativo do mobile — suave por ser o browser a scrollar. */
.sobre-path.is-native { height: auto; }
.sobre-path.is-native .sobre-path-sticky {
  position: static; height: auto; overflow: visible; padding: var(--sp-section, 5rem) 0;
}
.sobre-path.is-native .sobre-path-track {
  width: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--acc) 45%, transparent) transparent;
  transform: none !important;
  will-change: auto;
}
.sobre-path.is-native .sobre-path-track::-webkit-scrollbar { height: 6px; }
.sobre-path.is-native .sobre-path-track::-webkit-scrollbar-track { background: transparent; }
.sobre-path.is-native .sobre-path-track::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--acc) 40%, transparent);
  border-radius: 99px;
}
.sobre-path.is-native .sobre-path-step { scroll-snap-align: center; }
@media (prefers-reduced-motion: reduce) {
  .sobre-th-photo, .sobre-th-body { opacity: 1; }
  .sobre-path-eyebrow-dot { animation: none; }
}

/* ── Percurso: modo ampliado (foto em destaque + texto por baixo) ──────────── */
/* CRÍTICO: o display do CSS sobrepõe-se ao atributo hidden. Sem esta regra, o
   viewer fica sempre no DOM como overlay fixed a cobrir a página e a roubar
   todos os cliques (mesmo invisível, com opacity 0). */
.sobre-th-viewer[hidden] { display: none; }
.sobre-th-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 7, 11, .92);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .26s ease;
}
.sobre-th-viewer.is-open { opacity: 1; }
.sobre-th-viewer-figure {
  margin: 0;
  /* +30% face ao tamanho anterior (era min(1100px, 92vw)) */
  max-width: min(1430px, 96vw);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vh, 1.6rem);
  transform: translateY(10px);
  transition: transform .32s var(--ease-cinematic, cubic-bezier(.16,1,.3,1));
}
.sobre-th-viewer.is-open .sobre-th-viewer-figure { transform: none; }
.sobre-th-viewer-media {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg2);
  /* +30% face ao anterior (era 60vh) */
  max-height: 78vh;
}
.sobre-th-viewer-media img { width: 100%; height: 100%; max-height: 78vh; object-fit: contain; display: block; }
.sobre-th-viewer-ph {
  display: grid;
  place-items: center;
  min-height: 57vh;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text3);
  letter-spacing: .1em;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px);
}
.sobre-th-viewer-caption { max-width: 70ch; }
.sobre-th-viewer-title { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); margin: .3rem 0 .5rem; }
.sobre-th-viewer-desc { color: var(--text2); line-height: 1.7; margin: 0; }
.sobre-th-viewer-close,
.sobre-th-viewer-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.sobre-th-viewer-close:hover,
.sobre-th-viewer-nav:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: color-mix(in oklch, var(--acc) 50%, var(--border)); }
.sobre-th-viewer-close { top: clamp(1rem, 3vh, 2rem); right: clamp(1rem, 3vw, 2rem); }
.sobre-th-viewer-close svg,
.sobre-th-viewer-nav svg { width: 20px; height: 20px; }
.sobre-th-viewer-nav { top: 50%; transform: translateY(-50%); }
.sobre-th-viewer-nav.is-prev { left: clamp(.6rem, 2vw, 1.6rem); }
.sobre-th-viewer-nav.is-next { right: clamp(.6rem, 2vw, 1.6rem); }
.sobre-th-viewer-nav:disabled { opacity: .3; cursor: default; }
@media (max-width: 640px) {
  .sobre-th-viewer-nav { top: auto; bottom: clamp(1rem, 3vh, 2rem); transform: none; }
}
.sobre-th .is-panel-past .sobre-th-node,
.sobre-th .is-panel-active .sobre-th-node { border-color: color-mix(in oklch, var(--acc) 55%, var(--border)); }
.sobre-th .is-panel-active .sobre-th-node { box-shadow: 0 0 0 6px color-mix(in oklch, var(--acc) 12%, transparent); }

.sobre-th-title {
  font-size: clamp(1.1rem, .9rem + .5vw, 1.5rem);
  line-height: 1.25;
  margin: 0 0 .6rem;
}
/* Na timeline o texto é um teaser (o completo aparece no modo ampliado); sem o
   clamp, os passos mais longos transbordavam para fora do painel. */
.sobre-th-desc {
  color: var(--text2);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fallback sem GSAP (mobile e reduced-motion): timeline vertical */
.srv-process-pin:not(.is-gsap) .sobre-th-head { position: static; padding: 0; margin-bottom: clamp(24px, 4vh, 40px); }
.srv-process-pin:not(.is-gsap) .srv-process-track { padding-left: 0; padding-right: 0; }
.srv-process-pin:not(.is-gsap) .srv-process-track::before {
  top: 0;
  bottom: 0;
  left: calc(var(--th-node-size) / 2);
  right: auto;
  width: 1px;
  height: auto;
}
.srv-process-pin:not(.is-gsap) .sobre-th .srv-process-panel,
.sobre-th .srv-process-pin:not(.is-gsap) .srv-process-panel {
  flex: initial;
  height: auto;
  padding: 0 0 clamp(26px, 4vh, 44px) 0;
  opacity: 1;
  transform: none;
  display: grid;
  grid-template-columns: var(--th-node-size) 1fr;
  gap: clamp(14px, 2vw, 26px);
}
.srv-process-pin:not(.is-gsap) .sobre-th-title { margin: .35rem 0 .5rem; }
.sobre-th .srv-process-pin:not(.is-gsap) .sobre-th-node { color: var(--acc); }
.srv-process-pin:not(.is-gsap) .sobre-th-title,
.srv-process-pin:not(.is-gsap) .sobre-th-desc { grid-column: 2; }
.srv-process-pin:not(.is-gsap) .sobre-th-node { grid-row: 1 / span 2; }

/* ── Sobre — método em bloco simples (lista numerada) ──────────────────────── */
/* (Secção "Método" removida da página Sobre a pedido do cliente.) */

/* Bloco genérico (Origem, Pessoal) */
.sobre-block { max-width: 780px; position: relative; }
.sobre-block-num {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--acc-gold);
  font-family: var(--font-display), sans-serif;
  margin-bottom: .85rem;
}
.sobre-block h2 {
  font-size: clamp(1.65rem, 1rem + 2.2vw, 2.4rem);
  margin-bottom: 1.5rem;
  font-family: var(--font-display), sans-serif;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.sobre-block p {
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--text2);
  margin-bottom: 1rem;
}
.sobre-block p strong { color: var(--text); font-weight: 600; }

/* Formação — lista */
.sobre-formacao-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
}
.sobre-formacao-list li {
  position: relative;
  padding: .65rem 0 .65rem 1.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
}
.sobre-formacao-list li:last-child { border-bottom: none; }
.sobre-formacao-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.05rem;
  width: 8px; height: 1px;
  background: var(--acc-gold);
}
.sobre-formacao-source {
  color: var(--text3);
  font-size: .9rem;
  font-weight: 400;
}
.sobre-formacao-note {
  font-style: italic;
  color: var(--text3);
  margin-top: 1.25rem;
}

/* Cabeçalho de secção com sub-intro */
.section-intro {
  color: var(--text3);
  font-size: 1rem;
  margin: .5rem 0 2rem;
  max-width: 680px;
  line-height: 1.6;
}

/* Os 5 valores — grid */
.sobre-valores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.sobre-valor {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--bgcard);
  border: 1px solid var(--border);
  border-radius: var(--r14);
  transition: var(--transition);
}
.sobre-valor:hover {
  border-color: rgba(32,136,202,.3);
  transform: translateY(-3px);
}
.sobre-valor-num {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  font-size: 2.4rem;
  font-weight: 800;
  color: rgba(32,136,202,.18);
  font-family: var(--font-display), sans-serif;
  letter-spacing: -.03em;
  line-height: 1;
}
.sobre-valor h3 {
  font-size: 1.1rem;
  margin-bottom: .75rem;
  font-weight: 700;
  max-width: 80%;
}
.sobre-valor p {
  font-size: .92rem;
  color: var(--text2);
  line-height: 1.7;
  margin: 0;
}

/* Projectos marcantes — lista */
/* "Os que marcaram": painéis em linha que expandem no hover/foco. O painel
   activo cresce e revela a descrição; os outros encolhem. A media (foto, fotos
   em loop ou vídeo) preenche cada painel. Puro CSS, sem JS. */
.sobre-marcantes-expand {
  display: flex;
  gap: clamp(10px, 1vw, 16px);
  height: clamp(380px, 52vh, 560px);
}
.sobre-marcante {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r14);
  background: var(--bg2);
  cursor: pointer;
  transition: flex-grow .55s var(--ease-cinematic, cubic-bezier(.16,1,.3,1)),
              border-color .35s ease;
}
/* Um painel aberto por defeito (o primeiro), até o utilizador focar outro. */
.sobre-marcante.is-open { flex-grow: 3; }
/* Ao passar/focar em qualquer painel, todos encolhem... */
.sobre-marcantes-expand:hover .sobre-marcante,
.sobre-marcantes-expand:focus-within .sobre-marcante { flex-grow: .55; }
/* ...e o painel activo volta a crescer. Selector mais específico (0,4,0) para
   ganhar à regra de encolher acima (0,3,0). */
.sobre-marcantes-expand:hover .sobre-marcante:hover,
.sobre-marcantes-expand:focus-within .sobre-marcante:focus-within {
  flex-grow: 3;
  border-color: color-mix(in oklch, var(--acc) 55%, var(--border));
}
.sobre-marcante:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* Media (preenche o painel) */
.sobre-marcante-media { position: absolute; inset: 0; }
.sobre-marcante-media img,
.sobre-marcante-media video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sobre-marcante-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px);
}

/* Legenda por cima da media, ancorada em baixo */
.sobre-marcante-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: clamp(1rem, .8rem + .6vw, 1.5rem);
  background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.4) 55%, transparent);
}
.sobre-marcante-ctx {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .72rem;
  color: color-mix(in oklch, var(--acc) 80%, white);
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sobre-marcante h3 {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem);
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
/* A descrição só aparece quando o painel está expandido */
.sobre-marcante p {
  font-size: .98rem;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-cinematic, cubic-bezier(.16,1,.3,1)), opacity .4s ease;
}
.sobre-marcante.is-open p,
.sobre-marcante:hover p,
.sobre-marcante:focus-within p { max-height: 12em; opacity: 1; }
/* Quando outro painel é focado, o aberto por defeito fecha a descrição. */
.sobre-marcantes-expand:hover .sobre-marcante.is-open:not(:hover) p,
.sobre-marcantes-expand:focus-within .sobre-marcante.is-open:not(:focus-within) p {
  max-height: 0;
  opacity: 0;
}

/* Mobile: sem hover fiável, empilha tudo aberto */
@media (max-width: 760px) {
  .sobre-marcantes-expand { flex-direction: column; height: auto; }
  .sobre-marcante { flex: none; min-height: 300px; }
  .sobre-marcante p,
  .sobre-marcantes-expand:hover .sobre-marcante.is-open:not(:hover) p {
    max-height: 12em; opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sobre-marcante { transition: none; }
}

/* "Para lá do trabalho": grelha de interesses com tilt 3D + ícones vivos */
.sobre-pessoal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  perspective: 1000px;
}
.sobre-pessoal-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  background: var(--bgcard);
  border: 1px solid var(--border);
  border-radius: var(--r14);
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transform-style: preserve-3d;
  transition: transform .3s ease, border-color .35s ease, box-shadow .4s ease;
}
/* brilho de acento que aparece no hover, atrás do conteúdo */
.sobre-pessoal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%,
    color-mix(in oklch, var(--acc) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.sobre-pessoal-card:hover {
  --lift: -6px;
  border-color: color-mix(in oklch, var(--acc) 50%, var(--border));
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
}
.sobre-pessoal-card:hover::before { opacity: 1; }
.sobre-pessoal-card > * { position: relative; z-index: 1; }

/* Card com imagem de fundo (/imagens/interesses/<tema>.webp). A foto entra via
   ::after (atras do conteudo) com gradiente escuro para manter o texto legivel.
   Altura minima para a foto respirar. */
.sobre-pessoal-card.has-bg {
  min-height: 15rem;
  /* Conteúdo alinhado ao topo (como nos cards sem foto). */
  justify-content: flex-start;
  border-color: color-mix(in oklch, #fff 12%, transparent);
}
.sobre-pessoal-card.has-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Gradiente a escurecer o TOPO (onde fica o texto) e a aliviar em baixo. */
  background-image: linear-gradient(to bottom,
      rgba(6,10,15,.94) 0%, rgba(6,10,15,.78) 38%,
      rgba(6,10,15,.45) 68%, rgba(6,10,15,.25) 100%),
    /* escurecimento uniforme ligeiro sobre a foto toda (pedido do cliente) */
    linear-gradient(rgba(6,10,15,.32), rgba(6,10,15,.32)),
    var(--pl-bg);
  background-size: cover;
  background-position: center;
  transition: transform .6s var(--ease-cinematic, cubic-bezier(.16,1,.3,1));
}
.sobre-pessoal-card.has-bg:hover::after { transform: scale(1.05); }
.sobre-pessoal-card.has-bg h3 { color: #fff; }
.sobre-pessoal-card.has-bg p { color: rgba(255,255,255,.82); }
.sobre-pessoal-card.has-bg .sobre-pessoal-icon {
  background: color-mix(in oklch, var(--acc) 22%, rgba(0,0,0,.35));
  border-color: color-mix(in oklch, var(--acc) 40%, transparent);
  color: #fff;
}

/* Ícone: caixa que flutua ao de leve (staggered) e, no hover, enche de azul */
.sobre-pessoal-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: var(--acc);
  background: color-mix(in oklch, var(--acc) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--acc) 28%, var(--border));
  animation: sobre-pessoal-float 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease-cinematic, cubic-bezier(.16,1,.3,1));
}
.sobre-pessoal-icon svg { width: 26px; height: 26px; }
.sobre-pessoal-card:hover .sobre-pessoal-icon {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 8px 22px color-mix(in oklch, var(--acc) 45%, transparent);
}
@keyframes sobre-pessoal-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.sobre-pessoal-card h3 {
  margin: 0;
  font-size: clamp(1.1rem, .95rem + .4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
}
.sobre-pessoal-card p {
  margin: 0;
  font-size: .98rem;
  color: var(--text2);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .sobre-pessoal-card { transition: border-color .35s ease; transform: none; }
  .sobre-pessoal-icon { animation: none; }
}

/* DM At Studio — link */
.sobre-dmat-link {
  display: inline-block;
  color: var(--acc-gold);
  font-weight: 600;
  text-decoration: none;
  margin-top: .25rem;
  transition: var(--transition);
}
.sobre-dmat-link:hover {
  color: var(--acc);
  transform: translateX(3px);
}

/* CTA final — reutiliza .srv-cta-box já existente */
.sobre-cta-final .srv-cta-box {
  background: linear-gradient(135deg, var(--bgcard), rgba(32,136,202,.06));
  border-color: rgba(32,136,202,.25);
}

@media (max-width: 768px) {
  .sobre-valor-num { font-size: 2rem; top: 1rem; right: 1.25rem; }
}

/* =====================================================================
   HERO — Página /servico/{slug} (Fase 2 v2 — dot-grid + editorial)
   ===================================================================== */

.srv-hero {
  position: relative;
  min-height: 72dvh;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  font-family: var(--font-display);
}

/* Backdrop dot-grid (canvas full bleed) */
.srv-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.srv-hero-bg .dot-grid__wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.srv-hero-bg .dot-grid__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Gradiente subtil por cima dos dots para dar legibilidade ao header */
.srv-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    color-mix(in oklch, var(--bg) 75%, transparent) 35%,
    color-mix(in oklch, var(--bg) 35%, transparent) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Fallback estático para reduced-motion */
.srv-hero-bg.dot-grid--static {
  background:
    radial-gradient(60% 60% at 30% 40%, color-mix(in oklch, var(--svc-accent, var(--acc)) 18%, transparent), transparent 70%),
    radial-gradient(40% 40% at 80% 70%, color-mix(in oklch, var(--svc-accent, var(--acc)) 10%, transparent), transparent 70%),
    var(--bg);
}

.srv-hero-bg.dot-grid--static .dot-grid__canvas {
  display: none;
}

/* Conteúdo single-column: eyebrow (topo), título (centro-esquerda), CTAs (fundo) */
.srv-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 72dvh;
  padding: clamp(5rem, 4rem + 4vw, 8rem) clamp(1.5rem, 1rem + 3vw, 5rem) clamp(2rem, 1rem + 3vw, 4rem);
  pointer-events: none;
}

.srv-hero-content > * {
  pointer-events: auto;
}

/* Eyebrow (topo) — label de categoria com mais destaque */
.srv-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  align-self: start;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 24px var(--bg), 0 0 8px var(--bg);
  opacity: 0;
  transform: translateY(8px);
  animation: srv-hero-rev 0.6s var(--ease-cinematic) 0.1s forwards;
}

/* Bullet visual antes do label da categoria */
.srv-hero-eyebrow::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--svc-accent, var(--acc));
  box-shadow: 0 0 14px 2px color-mix(in oklch, var(--svc-accent, var(--acc)) 60%, transparent);
}

.srv-cat {
  color: var(--svc-accent, var(--acc));
  text-shadow: 0 0 18px color-mix(in oklch, var(--svc-accent, var(--acc)) 45%, transparent);
}

/* Title (centro-esquerda) — line-height respirável + text-shadow halo p/ destacar do dot-grid */
.srv-hero-title {
  align-self: center;
  justify-self: start;
  max-width: 14ch;
  /* Só troca de fonte (Geist -> Hanken Grotesk); mantém a espessura 900 e o caixa alta. */
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 1rem + 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-transform: uppercase;
  margin: 0;
  color: var(--text);
  text-shadow: 0 0 40px var(--bg), 0 0 12px var(--bg);
  opacity: 0;
  transform: translateY(20px);
  animation: srv-hero-rev 0.9s var(--ease-cinematic) 0.25s forwards;
}

.srv-hero-sub {
  align-self: center;
  justify-self: start;
  max-width: 40ch;
  margin: 1.25rem 0 0;
  font-family: var(--font-body);
  font-size: var(--text-svc-sub);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  text-shadow: 0 0 24px var(--bg), 0 0 8px var(--bg);
  opacity: 0;
  transform: translateY(12px);
  animation: srv-hero-rev 0.7s var(--ease-cinematic) 0.45s forwards;
}

/* CTAs (canto inferior-esquerdo) */
.srv-hero-ctas {
  align-self: end;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(12px);
  animation: srv-hero-rev 0.7s var(--ease-cinematic) 0.6s forwards;
}

.btn-lg {
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
}

.btn-ghost {
  background: color-mix(in oklch, var(--bg) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklch, var(--text) 22%, transparent);
  color: var(--text);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-snap),
              border-color var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-snap);
}

.btn-ghost:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--svc-accent, var(--acc)) 18%, var(--bg));
  border-color: var(--svc-accent, var(--acc));
}

/* Reveal animation */
@keyframes srv-hero-rev {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion */
.reduce-motion .srv-hero-eyebrow,
.reduce-motion .srv-hero-title,
.reduce-motion .srv-hero-sub,
.reduce-motion .srv-hero-ctas {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Mobile */
@media (max-width: 768px) {
  .srv-hero-content {
    padding: clamp(4.5rem, 4rem + 3vw, 5.5rem) clamp(1rem, 0.5rem + 3vw, 2rem) clamp(1.5rem, 1rem + 3vw, 2.5rem);
  }
  .srv-hero-title {
    max-width: 100%;
  }
}

/* Light mode */

/* ============================================================
   FASE 3 — Bloco 1: Sobre o serviço (MANIFESTO)
   Massive typographic statement + ambient deco + credenciais strip
   ============================================================ */

.srv-about {
  position: relative;
  /* 100px topo (via .section-divider ::before margin) + 100px fundo */
  padding-top: 0;
  padding-bottom: 100px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  overflow: hidden;
  isolation: isolate;
}

.srv-about.section-divider::before {
  margin-bottom: 100px;
}

/* Ambient gradient layer atrás (::after porque ::before é usado pelo .section-divider para a linha) */
.srv-about::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 50% 0%, color-mix(in oklch, var(--svc-accent, var(--acc)) 10%, transparent), transparent 60%),
    radial-gradient(50% 50% at 100% 100%, color-mix(in oklch, var(--svc-accent, var(--acc)) 6%, transparent), transparent 60%);
  pointer-events: none;
  z-index: -2;
}

/* Mega texto decorativo em marquee horizontal (dinâmica de fundo) */
.srv-about-deco {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  z-index: -1;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  transition: opacity 1.2s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1));
}

.srv-about-deco-track {
  display: flex;
  gap: clamp(4rem, 6vw, 10rem);
  flex-shrink: 0;
  animation: srv-marquee 90s linear infinite;
  will-change: transform;
}

.srv-about-deco-word {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 8vw, 11rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: color-mix(in oklch, var(--svc-accent, var(--acc)) 8%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
}

.srv-about-deco-word.is-faint {
  color: color-mix(in oklch, var(--svc-accent, var(--acc)) 4%, transparent);
}

@keyframes srv-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.srv-about.is-revealed .srv-about-deco {
  opacity: 1;
}

.reduce-motion .srv-about-deco-track {
  animation: none;
}

/* Eyebrow centrado */
.srv-about-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--svc-accent, var(--acc));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-cinematic), transform 0.7s var(--ease-cinematic);
}

.srv-about-eyebrow::before,
.srv-about-eyebrow::after {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: color-mix(in oklch, var(--svc-accent, var(--acc)) 60%, transparent);
}

.srv-about.is-revealed .srv-about-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

/* Manifesto headline — MASSIVE */
.srv-about-headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.2rem + 4.5vw, 5.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 auto;
  max-width: 22ch;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 30px color-mix(in oklch, var(--bg) 60%, transparent);
}

.srv-about-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-cinematic), transform 0.9s var(--ease-cinematic);
}

.srv-about.is-revealed .srv-about-headline .word {
  opacity: 1;
  transform: translateY(0);
}

.srv-about-headline .accent {
  color: var(--svc-accent, var(--acc));
  font-style: normal;
  position: relative;
  text-shadow: 0 0 28px color-mix(in oklch, var(--svc-accent, var(--acc)) 40%, transparent);
}

/* Subtle "drawn" underline sob o headline */
.srv-about-rule {
  display: block;
  width: clamp(60px, 4vw, 96px);
  height: 2px;
  background: var(--svc-accent, var(--acc));
  margin: clamp(2rem, 1.5rem + 1vw, 3rem) auto;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s var(--ease-cinematic) 0.4s;
  box-shadow: 0 0 12px color-mix(in oklch, var(--svc-accent, var(--acc)) 50%, transparent);
}

.srv-about.is-revealed .srv-about-rule {
  transform: scaleX(1);
}

/* Credibilidade — paragraph centrado */
.srv-about-credibility {
  max-width: 56ch;
  margin: 0 auto clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--text2);
  text-align: center;
  font-weight: 400;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-cinematic) 0.5s, transform 0.7s var(--ease-cinematic) 0.5s;
}

/* Sem strip de stats por baixo: remove margem inferior pendurada para o bottom ficar simétrico ao top */
.srv-about-credibility:last-child {
  margin-bottom: 0;
}

.srv-about.is-revealed .srv-about-credibility {
  opacity: 1;
  transform: translateY(0);
}

/* Credenciais strip — 3 stats em linha com separadores */
.srv-about-creds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-cinematic) 0.7s, transform 0.7s var(--ease-cinematic) 0.7s;
}

.srv-about.is-revealed .srv-about-creds {
  opacity: 1;
  transform: translateY(0);
}

.srv-about-cred {
  flex: 1 1 0;
  min-width: 160px;
  padding: clamp(1.5rem, 1rem + 1vw, 2.25rem) clamp(1rem, 0.5rem + 1vw, 2rem);
  text-align: center;
  position: relative;
}

.srv-about-cred + .srv-about-cred {
  border-left: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
}

.srv-about-cred-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--svc-accent, var(--acc));
  line-height: 1;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.srv-about-cred-num .suffix {
  font-size: 0.6em;
  font-weight: 500;
  margin-left: 0.05em;
  color: color-mix(in oklch, var(--svc-accent, var(--acc)) 70%, var(--text));
}

.srv-about-cred-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
  line-height: 1.4;
}

/* Reduced motion */
.reduce-motion .srv-about-eyebrow,
.reduce-motion .srv-about-headline .word,
.reduce-motion .srv-about-credibility,
.reduce-motion .srv-about-creds,
.reduce-motion .srv-about-deco {
  opacity: 1;
  transform: none;
  transition: none;
}
.reduce-motion .srv-about-rule {
  transform: scaleX(1);
}

/* Mobile */
@media (max-width: 700px) {
  .srv-about-creds {
    flex-direction: column;
  }
  .srv-about-cred + .srv-about-cred {
    border-left: none;
    border-top: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
  }
  .srv-about-eyebrow::before,
  .srv-about-eyebrow::after {
    width: 1.5rem;
  }
}

/* ============================================================
   FASE 3 — Bloco 2: Sub-serviços (bento kokonut style)
   ============================================================ */

.srv-subservices {
  position: relative;
  /* 100px topo (via .section-divider ::before margin) + 100px fundo */
  padding-top: 0;
  padding-bottom: 100px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  overflow: hidden;
}

.srv-subservices.section-divider::before {
  margin-bottom: 100px;
}

.srv-subservices-header {
  text-align: center;
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
  max-width: 60ch;
}

.srv-subservices-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--svc-accent, var(--acc));
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.srv-subservices-eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--svc-accent, var(--acc));
}

.srv-subservices-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  color: var(--text);
  text-wrap: balance;
}

.srv-subservices-lead {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
  text-wrap: balance;
}

/* Bento 3-col assimétrico: 6 itens em pattern (2+1, 1+2, 2+1) */
.srv-subservices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: clamp(0.85rem, 0.5rem + 0.8vw, 1.25rem);
}

/* 4 variantes de bento — atribuídas por slug em servico.php.
   Cada linha soma sempre 3 colunas com 6 cards no total. */

/* Variante A (default): (2+1)(1+2)(2+1) */
.srv-subservices-grid:not([class*="srv-bento-"]) > .srv-sub-card:nth-child(1),
.srv-bento-a > .srv-sub-card:nth-child(1) { grid-column: span 2; }
.srv-subservices-grid:not([class*="srv-bento-"]) > .srv-sub-card:nth-child(4),
.srv-bento-a > .srv-sub-card:nth-child(4) { grid-column: span 2; }
.srv-subservices-grid:not([class*="srv-bento-"]) > .srv-sub-card:nth-child(5),
.srv-bento-a > .srv-sub-card:nth-child(5) { grid-column: span 2; }

/* Variante B: (1+2)(2+1)(1+2) — espelho da A */
.srv-bento-b > .srv-sub-card:nth-child(2) { grid-column: span 2; }
.srv-bento-b > .srv-sub-card:nth-child(3) { grid-column: span 2; }
.srv-bento-b > .srv-sub-card:nth-child(6) { grid-column: span 2; }

/* Variante C: (2+1)(1+1+1)(3) — fecha com card full-width */
.srv-bento-c > .srv-sub-card:nth-child(1) { grid-column: span 2; }
.srv-bento-c > .srv-sub-card:nth-child(6) { grid-column: span 3; }

/* Variante D: (3)(1+1+1)(1+2) — abre com card full-width */
.srv-bento-d > .srv-sub-card:nth-child(1) { grid-column: span 3; }
.srv-bento-d > .srv-sub-card:nth-child(6) { grid-column: span 2; }

/* Variante de 5 cards (Os cinco princípios, na página Sobre):
   linha 1 = 2+1, linha 2 = 1+2, linha 3 = 3. */
.srv-bento-5 > .srv-sub-card:nth-child(1) { grid-column: span 2; }
.srv-bento-5 > .srv-sub-card:nth-child(4) { grid-column: span 2; }
.srv-bento-5 > .srv-sub-card:nth-child(5) { grid-column: span 3; }
/* Número do princípio no lugar do ícone */
.srv-sub-card-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--acc);
}

/* Card style: usa paleta do site (--bg2), sem tints accent */
.srv-sub-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  position: relative;
  color: inherit;            /* card pode ser <a> (categoria) ou <article> (serviço) */
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.4rem, 1rem + 1vw, 1.85rem);
  border-radius: 14px;
  border: 1px solid var(--border, color-mix(in oklch, var(--text) 10%, transparent));
  background: var(--bg2);
  box-shadow: 0 4px 18px color-mix(in oklch, #000 8%, transparent);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform 0.4s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 0.3s ease,
              box-shadow 0.4s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1)),
              background 0.3s ease,
              opacity 0.7s var(--ease-cinematic);
  opacity: 0;
  will-change: transform;
}

.srv-subservices.is-revealed .srv-sub-card {
  opacity: 1;
}

.srv-subservices.is-revealed .srv-sub-card:nth-child(1) { transition-delay: 0s, 0s, 0s, 0s, 0.05s; }
.srv-subservices.is-revealed .srv-sub-card:nth-child(2) { transition-delay: 0s, 0s, 0s, 0s, 0.12s; }
.srv-subservices.is-revealed .srv-sub-card:nth-child(3) { transition-delay: 0s, 0s, 0s, 0s, 0.19s; }
.srv-subservices.is-revealed .srv-sub-card:nth-child(4) { transition-delay: 0s, 0s, 0s, 0s, 0.26s; }
.srv-subservices.is-revealed .srv-sub-card:nth-child(5) { transition-delay: 0s, 0s, 0s, 0s, 0.33s; }
.srv-subservices.is-revealed .srv-sub-card:nth-child(6) { transition-delay: 0s, 0s, 0s, 0s, 0.40s; }

.srv-sub-card.is-hover {
  --lift: -5px;
  border-color: var(--acc);
  background: var(--bg3);
  box-shadow:
    0 14px 34px color-mix(in oklch, var(--acc) 22%, transparent),
    0 0 0 1px color-mix(in oklch, var(--acc) 35%, transparent) inset;
}

/* Header da card: só icon (sem número e sem seta) */
.srv-sub-card-head {
  position: relative;
  z-index: 1;
  margin-bottom: 0.25rem;
}

.srv-sub-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: color-mix(in oklch, var(--text) 5%, transparent);
  border: 1px solid color-mix(in oklch, var(--text) 8%, transparent);
  color: var(--text);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.srv-sub-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.srv-sub-card.is-hover .srv-sub-card-icon {
  background: color-mix(in oklch, var(--text) 10%, transparent);
  border-color: color-mix(in oklch, var(--text) 18%, transparent);
}

.srv-sub-card-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
}

.srv-sub-card-desc {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1rem);
  line-height: 1.55;
  color: var(--text2);
  margin: 0;
}

.reduce-motion .srv-sub-card {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Tablet */
@media (max-width: 900px) {
  .srv-subservices-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Anula spans de todas as variantes de bento em tablet */
  .srv-subservices-grid > .srv-sub-card {
    grid-column: auto;
  }
}

/* Mobile: o bento nao funciona em ecra estreito (cards espremidos e texto a
   transbordar). A pedido do cliente, em mobile abandonamos a grelha bento e
   usamos um empilhamento simples de cards a largura toda, sem tilt 3D. */
@media (max-width: 768px) {
  .srv-subservices-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-auto-rows: auto;
    gap: 0.85rem;
  }
  /* Anula todos os spans de bento (incluindo a variante de 5 cards) */
  .srv-subservices-grid > .srv-sub-card {
    grid-column: auto !important;
    width: 100%;
  }
  /* Sem perspetiva/tilt em mobile: cards direitos e legiveis */
  .srv-sub-card {
    transform: none !important;
    perspective: none;
  }
}

/* ============================================================
   FASE 3 — Bloco 3: Processo em scroll horizontal (5 passos)
   ============================================================ */

.srv-process {
  position: relative;
  padding-top: 0;
  /* Sem padding-bottom: o fundo do pin chega à linha do próximo divider.
     O texto dentro do painel já tem breathing room (align-items:center em 100vh). */
  padding-bottom: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  overflow: hidden;
}

/* Entrada suave aplicada AO PAINEL INTRO (não à secção — isso quebrava o pin
   do ScrollTrigger porque um elemento pinned não pode ter transform próprio). */
.srv-process-intro-body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .9s cubic-bezier(.22,1,.36,1);
}
.srv-process.is-approaching .srv-process-intro-body {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .srv-process-intro-body { opacity: 1; transform: none; transition: none; }
}

/* Sem margin-bottom: o fundo do pin começa imediatamente após a divider line.
   O 100px era para o texto, mas o texto do painel já está centrado verticalmente. */
.srv-process.section-divider::before {
  margin-bottom: 0;
}

/* Painel intro (primeiro do scroll horizontal) — título + lead da secção */
.srv-process-panel-intro .srv-process-panel-inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.srv-process-intro-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 56ch;
  align-items: center;
}

/* .srv-process-intro-meta removida — eyebrow 'O processo' descontinuado */

.srv-process-intro-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.2rem + 4.5vw, 5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

.srv-process-intro-lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
  text-wrap: balance;
}

.srv-process-intro-hint {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
  animation: srv-process-hint 2.4s ease-in-out infinite;
}

@keyframes srv-process-hint {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(6px); opacity: 1; }
}

.reduce-motion .srv-process-intro-hint {
  animation: none;
  opacity: 0.8;
}

/* Pin container: viewport altura cheia, overflow:hidden para o track sair pela direita */
.srv-process-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Fallback estático para quando GSAP não carrega: empilha painéis verticalmente */
.srv-process-pin:not(.is-gsap) {
  height: auto;
  overflow: visible;
}

.srv-process-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.srv-process-pin:not(.is-gsap) .srv-process-track {
  flex-direction: column;
  width: 100%;
  height: auto;
}

.srv-process-panel {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* -40% no padding vertical (espaço acima/abaixo do texto) */
  padding: clamp(1.2rem, 1.8vw, 2.4rem) clamp(1.5rem, 5vw, 6rem);
  box-sizing: border-box;
  overflow: hidden;
}

/* Background composto: blob principal + glow secundário + grid subtil.
   Cada painel herda --panel-accent (define shift de tom por passo). */
.srv-process-panel { --panel-accent: var(--acc); }
.srv-process-panel:nth-child(1) { --panel-accent: var(--acc); }
.srv-process-panel:nth-child(2) { --panel-accent: color-mix(in oklch, var(--acc) 82%, oklch(70% .18 25)); }
.srv-process-panel:nth-child(3) { --panel-accent: color-mix(in oklch, var(--acc) 78%, oklch(68% .16 320)); }
.srv-process-panel:nth-child(4) { --panel-accent: color-mix(in oklch, var(--acc) 80%, oklch(72% .18 145)); }
.srv-process-panel:nth-child(5) { --panel-accent: color-mix(in oklch, var(--acc) 76%, oklch(70% .17 55)); }
.srv-process-panel:nth-child(6) { --panel-accent: color-mix(in oklch, var(--acc) 78%, oklch(68% .16 210)); }

/* Glow principal — mais definido (blur menor), colors mistas */
.srv-process-panel-bg {
  position: absolute;
  width: 68vw;
  height: 68vw;
  max-width: 860px;
  max-height: 860px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in oklch, var(--panel-accent) 32%, transparent) 0%,
    color-mix(in oklch, var(--panel-accent) 10%, transparent) 42%,
    transparent 70%);
  filter: blur(55px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: opacity 0.6s ease, filter 0.6s ease;
}

/* Glow secundário — canto oposto, cor complementar suave */
.srv-process-panel::before {
  content: '';
  position: absolute;
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in oklch, var(--panel-accent) 14%, transparent) 0%,
    transparent 65%);
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.6s ease;
}

/* Overlay grid subtil — dá sensação de superfície premium */
.srv-process-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--text) 4%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Realça glows quando painel está activo — dá vida ao scroll */
.srv-process-panel.is-panel-active .srv-process-panel-bg { opacity: 0.85; }
.srv-process-panel.is-panel-active::before { opacity: 0.75; }

/* Alternância de posição do glow principal */
.srv-process-panel:nth-child(1) .srv-process-panel-bg { top: -20%; left: 50%; transform: translateX(-50%); }
.srv-process-panel:nth-child(2) .srv-process-panel-bg { top: 50%; left: -10%; transform: translateY(-50%); }
.srv-process-panel:nth-child(3) .srv-process-panel-bg { top: 50%; right: -10%; transform: translateY(-50%); }
.srv-process-panel:nth-child(4) .srv-process-panel-bg { bottom: -20%; left: 50%; transform: translateX(-50%); }
.srv-process-panel:nth-child(5) .srv-process-panel-bg { top: -10%; left: -10%; }
.srv-process-panel:nth-child(6) .srv-process-panel-bg { bottom: -10%; right: -10%; }

/* Posição do glow secundário — oposta à do principal */
.srv-process-panel:nth-child(1)::before { bottom: -15%; right: 10%; }
.srv-process-panel:nth-child(2)::before { top: -10%; right: 5%; }
.srv-process-panel:nth-child(3)::before { bottom: -10%; left: 5%; }
.srv-process-panel:nth-child(4)::before { top: -15%; right: 10%; }
.srv-process-panel:nth-child(5)::before { bottom: -10%; right: -5%; }
.srv-process-panel:nth-child(6)::before { top: -10%; left: -5%; }

.srv-process-panel-inner {
  position: relative;
  z-index: 1;
}

.srv-process-pin:not(.is-gsap) .srv-process-panel {
  flex: none;
  width: 100%;
  height: auto;
  min-height: 320px;
  padding: clamp(2.5rem, 4vw, 5rem) clamp(1rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in oklch, var(--text) 8%, transparent);
}

.srv-process-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 4vw, 6.5rem);
  align-items: center;
  width: 100%;
  max-width: 1320px;
}

/* Painel intro: sem stack, layout single-col centrado */
.srv-process-panel-intro .srv-process-panel-inner {
  grid-template-columns: 1fr !important;
}

.srv-process-panel-num {
  font-family: var(--font-display);
  font-size: clamp(6.5rem, 3.5rem + 11vw, 14rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  padding-right: clamp(1rem, 1.5vw, 2rem);
  /* Gradient mask: accent no topo → muted no fundo. Destaque premium */
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--acc) 80%, transparent) 0%,
    color-mix(in oklch, var(--acc) 45%, transparent) 45%,
    color-mix(in oklch, var(--text) 14%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0;
  user-select: none;
  align-self: center;
  justify-self: center;
}

.srv-process-panel-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 48ch;
}

.srv-process-panel-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text3);
}

.srv-process-panel-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}

.srv-process-panel-desc {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
}

/* Skiper17-style: stack de 3 cards no canto direito do painel */
.srv-process-panel-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 360px;
  justify-self: end;
  align-self: center;
  perspective: 1200px;
  cursor: pointer;
  z-index: 2;
}
/* Cada card individual reage ao próprio hover — não só o do topo */
.srv-process-stack-card:hover {
  box-shadow:
    0 24px 60px color-mix(in oklch, var(--panel-accent, var(--acc)) 30%, transparent),
    0 0 0 1px color-mix(in oklch, var(--panel-accent, var(--acc)) 40%, transparent) inset !important;
  z-index: 10 !important;
  border-color: color-mix(in oklch, var(--panel-accent, var(--acc)) 45%, var(--border));
}
.srv-process-panel.is-panel-active .srv-process-stack-card[data-pos="1"]:hover {
  transform: translate(-30%, -32%) rotate(-2deg) scale(0.68);
}
.srv-process-panel.is-panel-active .srv-process-stack-card[data-pos="2"]:hover {
  transform: translate(30%, -32%) rotate(2deg) scale(0.68);
}
.srv-process-panel.is-panel-active .srv-process-stack-card[data-pos="3"]:hover {
  transform: translate(0%, 32%) rotate(0deg) scale(0.68);
}

/* Easter egg — dealer shuffle (5 cliques activam sequência) */
.srv-process-panel-stack.is-dealing .srv-process-stack-card {
  animation: srv-dealer 1.6s cubic-bezier(.22,1,.36,1) forwards;
}
.srv-process-panel-stack.is-dealing .srv-process-stack-card:nth-child(1) { animation-delay: 0ms; }
.srv-process-panel-stack.is-dealing .srv-process-stack-card:nth-child(2) { animation-delay: 80ms; }
.srv-process-panel-stack.is-dealing .srv-process-stack-card:nth-child(3) { animation-delay: 160ms; }

@keyframes srv-dealer {
  0% {
    /* estado actual (mantido) */
  }
  20% {
    /* Fase 1: juntam-se no centro, rotam levemente */
    transform: translate(0, 0) rotate(-8deg) scale(0.9);
    opacity: 1;
    z-index: 5;
  }
  35% {
    transform: translate(-3%, 2%) rotate(6deg) scale(0.88);
  }
  50% {
    /* Fase 2: baralho — pequenos shifts rápidos */
    transform: translate(4%, -2%) rotate(-10deg) scale(0.9);
  }
  65% {
    transform: translate(-2%, 4%) rotate(8deg) scale(0.88);
  }
  75% {
    /* Fase 3: fly-out momentâneo antes de assentar */
    transform: translate(0, -40%) rotate(0deg) scale(0.75);
    opacity: 0.9;
  }
  100% {
    /* volta às posições organizadas do estado is-panel-active
       (se o painel estiver activo; caso contrário JS já randomizou) */
    opacity: 1;
  }
}

.srv-process-stack-card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  background: linear-gradient(
    140deg,
    color-mix(in oklch, var(--bg2) 90%, var(--text) 10%),
    color-mix(in oklch, var(--bg2) 96%, var(--text) 4%)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow:
    0 18px 40px color-mix(in oklch, #000 35%, transparent),
    0 0 0 1px color-mix(in oklch, #000 25%, transparent) inset;
  transition: transform 0.6s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.5s ease;
}

/* Imagem real do passo (secção "Como trabalho consigo"): preenche o cartão */
.srv-process-stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Estado default (amontoado / messy stack) — antes do painel estar centrado */
.srv-process-stack-card[data-pos="1"] {
  transform: translateY(0) rotate(-3deg);
  z-index: 3;
}
.srv-process-stack-card[data-pos="2"] {
  transform: translate(8%, -4%) rotate(4deg);
  z-index: 2;
  opacity: 0.85;
}
.srv-process-stack-card[data-pos="3"] {
  transform: translate(-6%, 4%) rotate(-7deg);
  z-index: 1;
  opacity: 0.65;
}

/* Estado organizado — quando o painel é o currently-active no scroll horizontal.
   Cards arranjam-se em triângulo escalado para 0.6, sem sobreposições significativas. */
.srv-process-panel.is-panel-active .srv-process-stack-card[data-pos="1"] {
  transform: translate(-30%, -32%) rotate(-2deg) scale(0.6);
  opacity: 1;
  z-index: 3;
}
.srv-process-panel.is-panel-active .srv-process-stack-card[data-pos="2"] {
  transform: translate(30%, -32%) rotate(2deg) scale(0.6);
  opacity: 1;
  z-index: 3;
}
.srv-process-panel.is-panel-active .srv-process-stack-card[data-pos="3"] {
  transform: translate(0%, 32%) rotate(0deg) scale(0.6);
  opacity: 1;
  z-index: 3;
}

/* Easing mais cinematic para a transição messy <-> organized */
.srv-process-stack-card {
  transition: transform 0.8s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity 0.6s ease,
              box-shadow 0.5s ease;
}

/* Placeholder dentro do card (texto centrado, monospace, low-contrast) */
.srv-process-stack-placeholder {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0.5rem 1rem;
  border: 1px dashed color-mix(in oklch, var(--text) 18%, transparent);
  border-radius: 999px;
}

.reduce-motion .srv-process-stack-card,
.reduce-motion .srv-process-panel:hover .srv-process-stack-card {
  transition: none;
}

/* Tablet: reduzir stack */
@media (max-width: 1024px) {
  .srv-process-panel-inner {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 0.7fr);
    gap: 1.5rem;
  }
  .srv-process-panel-stack {
    max-width: 260px;
  }
}

/* Progress dots no fundo do pin */
.srv-process-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 2;
}

.srv-process-pin:not(.is-gsap) .srv-process-progress {
  display: none;
}

.srv-process-progress-dot {
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 12%, transparent);
  transition: background 0.3s ease, width 0.4s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1));
}

.srv-process-progress-dot.is-active {
  background: var(--acc);
  width: 48px;
}

/* Mobile (fallback empilhado mesmo com GSAP) */
@media (max-width: 768px) {
  .srv-process-panel-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: left;
  }
  .srv-process-panel-num {
    font-size: clamp(5rem, 4rem + 8vw, 9rem);
    justify-self: start;
    padding-right: 0;
  }
  .srv-process-panel-body {
    max-width: 100%;
  }
  .srv-process-panel-stack {
    display: none;
  }
  /* Sem scroll horizontal em mobile: o indicador "Faça scroll" deixa de fazer sentido */
  .srv-process-intro-hint { display: none; }
  /* Números grandes alternados: passos pares (01, 03, 05) à esquerda; ímpares (02, 04) à direita.
     O 1.º filho da track é o painel intro; os passos começam no 2.º filho. */
  .srv-process-track > .srv-process-panel:nth-child(even) .srv-process-panel-num {
    justify-self: start;
  }
  .srv-process-track > .srv-process-panel:nth-child(odd):not(.srv-process-panel-intro) .srv-process-panel-num {
    justify-self: end;
  }
  .srv-process-track > .srv-process-panel:nth-child(odd):not(.srv-process-panel-intro) .srv-process-panel-inner {
    text-align: right;
  }
  .srv-process-track > .srv-process-panel:nth-child(odd):not(.srv-process-panel-intro) .srv-process-panel-body {
    align-items: flex-end;
  }
}

/* ============================================================
   FASE 3 — Bloco 4: Portfolio relacionado (editorial 3-col 4:5)
   ============================================================ */

.srv-portfolio {
  position: relative;
  padding-top: 0;
  padding-bottom: 100px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  overflow: hidden;
}

.srv-portfolio.section-divider::before {
  margin-bottom: 100px;
}

.srv-portfolio-header {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
}

.srv-portfolio-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  color: var(--text);
  text-wrap: balance;
}

.srv-portfolio-lead {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
  text-wrap: balance;
}

/* Skiper52-style: fila horizontal de cards, hover expande */
.srv-portfolio-expand {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  height: clamp(22rem, 18rem + 10vw, 30rem);
  overflow: hidden;
  padding: 0 0.25rem;
  box-sizing: border-box;
}

.srv-portfolio-card {
  position: relative;
  display: block;
  flex: 0 0 5rem;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
  background: var(--card-bg, var(--bg2));
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: flex-basis 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s ease,
              box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: flex-basis;
}

.srv-portfolio-card.is-active {
  flex: 1 1 26rem;
  border-color: var(--acc);
  box-shadow:
    0 18px 42px color-mix(in oklch, var(--acc) 28%, transparent),
    0 0 0 1px color-mix(in oklch, var(--acc) 35%, transparent) inset;
}

/* Media: width fixa = dimensão active, mas CENTRADA no card visível via translateX(-50%).
   Quando o card é narrow, o logo fica visualmente centrado no meio do card (não cropped a um lado). */
.srv-portfolio-card-media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  /* Blur subtil quando card é narrow (inactive). Transition para suavizar quando vira active. */
  filter: blur(8px);
  transition: filter 0.7s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1));
}

.srv-portfolio-card.is-active .srv-portfolio-card-media {
  filter: blur(0);
  /* O card ativo cresce para além dos 26rem; a media acompanha a largura toda
     para o vídeo (e fotos) preencherem a caixa em vez de deixarem margens. */
  width: 100%;
  left: 0;
  transform: none;
}

/* Imagens/logótipos: contain (nunca cortar/esticar) */
.srv-portfolio-card-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.7s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Vídeo: preenche a caixa toda (mesmo vertical, cresce até cobrir horizontalmente) */
.srv-portfolio-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1));
}

.srv-portfolio-card.is-active .srv-portfolio-card-media img,
.srv-portfolio-card.is-active .srv-portfolio-card-media video {
  transform: scale(1.04);
}

/* Info: overlay no fundo do card, visível só quando .is-active.
   Gradient sobe alto para garantir contraste sobre logos em fundos claros (branco). */
.srv-portfolio-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.5rem 1.5rem 1.5rem;
  background: linear-gradient(to top,
    color-mix(in oklch, #000 92%, transparent) 0%,
    color-mix(in oklch, #000 78%, transparent) 35%,
    color-mix(in oklch, #000 50%, transparent) 65%,
    color-mix(in oklch, #000 22%, transparent) 85%,
    transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease 0.1s, transform 0.45s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1)) 0.1s;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

.srv-portfolio-card.is-active .srv-portfolio-card-info {
  opacity: 1;
  transform: translateY(0);
}

.srv-portfolio-card-cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.srv-portfolio-card-name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* CTA "Ver portfólio completo" */
.srv-portfolio-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) auto 0;
  padding: 0.85rem 1.5rem;
  border: 1px solid color-mix(in oklch, var(--text) 18%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  width: max-content;
}

.srv-portfolio > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.srv-portfolio-cta:hover {
  border-color: var(--acc);
  background: color-mix(in oklch, var(--acc) 12%, transparent);
  color: #fff;
}

.reduce-motion .srv-portfolio-card {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Tablet: reduzir largura mínima do card active */
@media (max-width: 900px) {
  .srv-portfolio-expand {
    height: clamp(18rem, 14rem + 16vw, 22rem);
    gap: 0.4rem;
  }
  .srv-portfolio-card {
    flex-basis: 4rem;
  }
  .srv-portfolio-card.is-active {
    flex-basis: 18rem;
  }
}

/* Mobile: coluna vertical, cards empilhados. A media preenche a caixa; imagens/
   logotipos em contain (nunca cortados), video em cover (preenche na horizontal).
   Cards inativos mantêm o blur; o ativo fica nítido. O clique expande (o JS impede
   a navegacao para o portfolio em ecra tactil). */
@media (max-width: 768px) {
  .srv-portfolio-expand {
    flex-direction: column;
    height: auto;
    gap: 0.6rem;
  }
  .srv-portfolio-card {
    flex: 0 0 6rem;
    width: 100%;
    height: 6rem;
    transition: flex-basis 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease,
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .srv-portfolio-card.is-active {
    flex: 0 0 16rem;
    height: 16rem;
  }
  /* Media preenche a caixa; mantém o blur nos cards fechados. */
  .srv-portfolio-card-media {
    position: absolute;
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    padding: clamp(0.9rem, 0.5rem + 2vw, 1.6rem);
    filter: blur(8px);
  }
  .srv-portfolio-card.is-active .srv-portfolio-card-media { filter: blur(0); }
  /* Imagens/logotipos: contain, sem cortar */
  .srv-portfolio-card .srv-portfolio-card-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: none;
  }
  /* Video: cover, ignora o padding para encher a caixa toda */
  .srv-portfolio-card .srv-portfolio-card-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    transform: none;
  }
  .srv-portfolio-card.is-active .srv-portfolio-card-media img,
  .srv-portfolio-card.is-active .srv-portfolio-card-media video {
    transform: none;
  }
  /* Nome sempre visivel (legenda no fundo), tambem quando o card esta fechado. */
  .srv-portfolio-card-info {
    white-space: normal;
    opacity: 1;
    transform: none;
    padding: 2.5rem 1.1rem 0.9rem;
  }
}

/* ============================================================
   FASE 3 — Bloco 5: Modal de orçamento
   ============================================================ */

.srv-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 1rem + 2vw, 3rem);
  background: color-mix(in oklch, #000 65%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1));
}

.srv-modal-backdrop[hidden] {
  display: none;
}

.srv-modal-backdrop.is-open {
  opacity: 1;
}

.srv-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  border-radius: 16px;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  box-shadow: 0 24px 60px color-mix(in oklch, #000 50%, transparent);
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: transform 0.45s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity 0.35s ease;
  font-family: var(--font-display);
}

.srv-modal-backdrop.is-open .srv-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.srv-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--text) 14%, transparent);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.srv-modal-close svg {
  width: 1.1rem;
  height: 1.1rem;
}
.srv-modal-close:hover {
  color: var(--text);
  border-color: var(--acc);
  background: color-mix(in oklch, var(--acc) 12%, transparent);
}

.srv-modal-header {
  margin-bottom: 1.5rem;
  padding-right: 2rem;
}

.srv-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--svc-accent, var(--acc));
  display: block;
  margin-bottom: 0.5rem;
}

.srv-modal-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.65rem;
  color: var(--text);
  text-wrap: balance;
}

.srv-modal-lead {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text2);
  margin: 0;
}

.srv-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.srv-modal-honey {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  padding: 0 !important;
  border: 0 !important;
}

.srv-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.srv-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.srv-modal-field-full {
  grid-column: 1 / -1;
}

.srv-modal-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
}

.srv-modal-field input,
.srv-modal-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: color-mix(in oklch, var(--bg) 70%, transparent);
  border: 1px solid color-mix(in oklch, var(--text) 12%, transparent);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  resize: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.srv-modal-field input:focus,
.srv-modal-field textarea:focus {
  outline: none;
  border-color: var(--acc);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--acc) 18%, transparent);
}

.srv-modal-field textarea {
  resize: vertical;
  min-height: 100px;
}

.srv-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.srv-modal-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.5rem;
  background: var(--acc);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.3s ease;
  min-height: 3rem;
}

.srv-modal-submit:hover:not(:disabled) {
  background: color-mix(in oklch, var(--acc) 90%, white);
  box-shadow: 0 10px 24px color-mix(in oklch, var(--acc) 35%, transparent);
}

.srv-modal-submit:active {
  transform: translateY(1px);
}

.srv-modal-submit:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.srv-modal-submit-loading {
  display: none;
}

.srv-modal-submit.is-loading .srv-modal-submit-label {
  visibility: hidden;
}
.srv-modal-submit.is-loading .srv-modal-submit-loading {
  position: absolute;
  display: inline-flex;
}

.srv-modal-spinner {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: srv-modal-spin 0.8s linear infinite;
}

@keyframes srv-modal-spin {
  to { transform: rotate(360deg); }
}

.srv-modal-status {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text2);
  min-height: 1.2rem;
}

.srv-modal-status.is-success {
  color: #5cd6a8;
}
.srv-modal-status.is-error {
  color: #ff6b6b;
}

/* Body lock quando modal aberto */
body.is-modal-open {
  overflow: hidden;
}

/* Reduced motion */
.reduce-motion .srv-modal-backdrop,
.reduce-motion .srv-modal {
  transition: opacity 0.2s ease !important;
  transform: none !important;
}
.reduce-motion .srv-modal-spinner {
  animation: none;
}

/* Mobile: stack fields, full-width */
@media (max-width: 600px) {
  .srv-modal-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== /servicos — hero de pesquisa + secções de categoria ===== */
.srv-search-hero { padding: clamp(120px, 16vh, 180px) 0 clamp(50px, 7vh, 90px); }
.srv-search-layout {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center;
}
.srv-search-copy h1 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.9rem, 6.4vw, 5.4rem); font-weight: 400;
  line-height: .9; letter-spacing: -.03em; margin: .4rem 0 1rem;
  color: var(--text); text-wrap: balance;
}
.srv-search-copy p { color: var(--text2); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; margin-bottom: 1.6rem; max-width: 52ch; }

/* Caixa de pesquisa simulada */
.srv-search-stage { perspective: 1000px; }
.srv-search-box {
  --tilt-x: 0deg; --tilt-y: 0deg;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px; box-shadow: 0 40px 90px rgba(0,0,0,.4);
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .4s cubic-bezier(.16,1,.3,1); will-change: transform;
}
.srv-search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg3, rgba(255,255,255,.04)); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; color: var(--text2);
}
.srv-search-text { font-size: .98rem; color: var(--text); white-space: nowrap; overflow: hidden; }
.srv-search-caret { width: 2px; height: 1.05em; background: var(--acc); animation: srvCaret 1s step-end infinite; }
@keyframes srvCaret { 50% { opacity: 0; } }
.srv-search-results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.srv-search-result {
  display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text2);
  padding: 9px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, border-color .2s ease, color .2s ease, background .2s ease;
  text-decoration: none; cursor: pointer;
}
.srv-search-result.is-in { opacity: 1; transform: translateY(0); }
a.srv-search-result:hover, a.srv-search-result:focus-visible {
  color: var(--text); border-color: color-mix(in oklch, var(--acc) 55%, var(--border));
  background: color-mix(in oklch, var(--acc) 10%, transparent);
}
.srv-search-result::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: 0 0 auto; }
.srv-search-result::after { content: "\2197"; margin-left: auto; color: var(--acc); opacity: 0; transition: opacity .2s ease; font-size: .8rem; }
a.srv-search-result:hover::after, a.srv-search-result:focus-visible::after { opacity: 1; }

/* Secção de categoria */
.srv-cat-section { padding: clamp(56px, 8vh, 100px) 0; border-top: 1px solid var(--border); }
.srv-cat-head { max-width: 760px; margin-bottom: clamp(24px, 4vh, 44px); }
.srv-cat-title { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--acc); margin: 0 0 .6rem; }
.srv-cat-intro { color: var(--text2); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.srv-subcat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.srv-subcat-card {
  --tilt-x: 0deg; --tilt-y: 0deg;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease; will-change: transform;
}
.srv-subcat-card:hover { border-color: color-mix(in oklch, var(--acc) 40%, var(--border)); }
.srv-subcat-title { font-size: 1.05rem; margin: 0 0 6px; }
.srv-subcat-title a { color: var(--text); text-decoration: none; }
.srv-subcat-title a:hover { color: var(--acc); }
.srv-subcat-desc { color: var(--text3); font-size: .86rem; line-height: 1.5; margin: 0 0 12px; }
.srv-subcat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.srv-subcat-list li { color: var(--text2); font-size: .84rem; padding-left: 14px; position: relative; }
.srv-subcat-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); opacity: .6; }
.srv-cat-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.srv-cat-more { color: var(--acc); font-weight: 600; font-size: .9rem; text-decoration: none; }
.srv-cat-more:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .srv-search-layout { grid-template-columns: 1fr; }
  .srv-search-stage { order: -1; }
  .srv-subcat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .srv-subcat-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .srv-search-caret { animation: none; }
  .srv-search-box, .srv-subcat-card { transition: none; transform: none; }
}

/* A página de categoria (categoria.php) reutiliza integralmente os componentes
   de servico.php (srv-hero, srv-about, srv-subservices, srv-process, srv-portfolio,
   srv-page-faq, srv-page-cta), pelo que não precisa de CSS próprio. */