/* ============================================================
   site.css — tokens + base styles partilhados por todas as páginas
   Carregado em todas as páginas via <link rel="stylesheet" href="/shared/site.css">
   Não alterar tokens aqui sem actualizar brand.json em paralelo.
   ============================================================ */

/* Reset minimalista — preferimos tipografia consistente em vez de normalize completo */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; }

/* ---- Tokens (espelham brand.json) ----------------------- */
:root {
  --ink-950: #0c0d10; --ink-900: #16181c; --ink-800: #1f2127; --ink-700: #2a2d35;
  --ink-500: #5b606c; --ink-400:      #707682;   /* escurecido p/ passar WCAG AA sobre branco (4,56:1) */ --ink-300: #b6bac3; --ink-200: #dadde3;
  --ink-100: #eef0f4; --ink-50:  #f7f8fa;

  /* Palete OFICIAL da marca Kooldent (folha de marca, 2026) — só 4 cores:
     roxo escuro #77227f · lilás #c7aad1 · bege #c9c3be · branco.
     O logo Kooldent vive sobre roxo escuro; o site espelha essa identidade.
     Mantemos um accent primário (roxo da marca) + 1 secundária (lilás da marca);
     o antigo "rosa" foi colapsado no roxo da marca (paleta exata, sem cores fora-de-marca). */
  --accent:        #77227f;   /* roxo da marca — primário (CTAs, links, ênfase) */
  --accent-hover:  #5a1860;   /* roxo da marca escurecido — hover de CTAs (necessário p/ contraste) */
  --accent-soft:   #f4ecf9;   /* tinta lilás muito clara (família do #c7aad1) — backgrounds soft */
  --accent-rose:   #77227f;   /* (ex-rosa) → roxo da marca — paleta exata */
  --accent-lilac:  #c7aad1;   /* lilás da marca — gradients e overlays */

  /* Tipografia — Cabinet Grotesk + Satoshi via Fontshare; Inter está BANIDO (taste-skill §7) */
  --font-display: 'Cabinet Grotesk', 'Geist', system-ui, -apple-system, sans-serif;
  --font-body:    'Satoshi', 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;

  /* Raios e sombras — sombra "diffusion" (taste-skill §9) */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 9999px;
  --shadow-diffusion: 0 20px 60px -25px rgba(12, 13, 16, 0.18);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -18px rgba(12,13,16,0.25);

  /* Movimento — fluid CSS (MOTION_INTENSITY=6) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  420ms;
  --stagger: 90ms;

  /* Largura máxima da página — taste-skill §2: max-w-7xl mx-auto */
  --container-max: 1280px;
}

/* ---- Tipografia base ------------------------------------ */
body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--ink-50);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Note: Tailwind Play CDN preflight reseta h1-h6 para font-size: inherit / weight: inherit.
   Para vencer a cascade SEM !important, usamos selectores com especificidade 0,0,0,2 (body + element). */
body h1, body h2, body h3, body h4, body h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-950);
  margin: 0;
}
body h1 { font-size: clamp(2.25rem, 4.4vw + 0.5rem, 4.5rem); }
body h2 { font-size: clamp(1.75rem, 2.4vw + 0.5rem, 3rem); }
body h3 { font-size: clamp(1.25rem, 1vw + 0.7rem, 1.75rem); }
body p  { color: var(--ink-700); max-width: 65ch; }
a  { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent); }

/* Container partilhado */
.kd-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* ---- Botões — feedback táctil :active (taste-skill Rule 5) ---- */
.kd-btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.95rem;
  letter-spacing: -0.005em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  will-change: transform;
}
.kd-btn:active { transform: translateY(1px); }
.kd-btn--primary { background: var(--accent); color: #fff; }
.kd-btn--primary:hover { background: var(--accent-hover); color: #fff; }
.kd-btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-200); }
.kd-btn--ghost:hover { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.kd-btn--dark { background: var(--ink-950); color: #fff; }
.kd-btn--dark:hover { background: var(--ink-900); color: #fff; }

/* ---- Header sticky com glassmorphism (taste-skill §4 Liquid Glass) ---- */
.kd-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(247, 248, 250, 0.72);
  border-bottom: 1px solid rgba(12, 13, 16, 0.06);
  /* Realce subtil interno superior — refraction edge */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background-color var(--dur) var(--ease);
}
.kd-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.875rem; gap: 2rem; }
.kd-header__logo  { display: flex; align-items: center; gap: 0.625rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.125rem; color: var(--ink-950); }
/* Logo no header — versão QUADRADA (KOOL / DENT / coração / tagline empilhados),
   ratio ~1:1. Por ser empilhado precisa de mais altura que o lockup horizontal
   antigo para a tagline continuar legível: 68px. */
.kd-header__logo img { height: 68px; width: auto; display: block; }
.kd-header__nav   { display: flex; align-items: center; gap: 1.75rem; }
.kd-header__nav a { font-size: 0.95rem; color: var(--ink-700); position: relative; padding-block: 0.25rem; }
.kd-header__nav a:hover { color: var(--ink-950); }
.kd-header__nav a[aria-current="page"] { color: var(--ink-950); }
.kd-header__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); border-radius: 2px; }
.kd-header__cta { display: inline-flex; }

/* Menu mobile — escondido até < 768px */
.kd-header__burger { display: none; background: none; border: 0; padding: 0.5rem; color: var(--ink-950); cursor: pointer; }
@media (max-width: 768px) {
  .kd-header__nav, .kd-header__cta { display: none; }
  .kd-header__burger { display: inline-flex; }
  /* O logo quadrado é ~1:1 — a 68px engrossaria demasiado o header no telemóvel,
     onde não há nav a preencher a linha. 52px mantém a tagline legível. */
  .kd-header__logo img { height: 52px; }
}

/* Âncora do formulário de marcação (#formulario).
   O header é `position: sticky`, por isso um salto de âncora normal deixaria o
   topo da secção escondido por baixo dele. O scroll-margin-top diz ao browser
   para parar N pixels acima do alvo — N = altura do header (logo + padding). */
#formulario { scroll-margin-top: 112px; }
@media (max-width: 768px) { #formulario { scroll-margin-top: 96px; } }

/* ── BREADCRUMB — caminho de navegação subtil sob o header ──────────── */
.kd-breadcrumb {
  background: rgba(247,248,250,0.94);
  border-bottom: 1px solid rgba(12,13,16,0.06);
  padding: 0.3rem 0;
}
.kd-breadcrumb .kd-container {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.2rem 0.3rem;
  font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.04em;
  color: var(--ink-400);
}
.kd-breadcrumb a { color: var(--ink-400); text-decoration: none; transition: color 160ms ease; }
.kd-breadcrumb a:hover { color: var(--accent); }
.kd-bc-sep { color: var(--ink-200); user-select: none; margin: 0 0.05rem; }
.kd-bc-current { color: var(--ink-600); font-weight: 500; }

/* ── MEGA MENU (desktop hover panels) ─────────────────────────────── */
/* Wrapper do trigger — flex item dentro de kd-header__nav */
.kd-nav-group { display: flex; align-items: center; }

/* Chevron inline ao lado do texto do link */
.kd-nav-chevron {
  display: inline-block; vertical-align: middle;
  margin-left: 3px; margin-top: -1px;
  transition: transform 220ms ease;
  color: var(--ink-400);
}
.kd-nav-group[data-active] .kd-nav-chevron { transform: rotate(180deg); color: var(--accent); }
.kd-nav-group[data-active] > a { color: var(--accent) !important; }

/* Backdrop semi-transparente — aparece debaixo do painel, acima do conteúdo */
.kd-mega-backdrop {
  position: fixed; inset: 0; z-index: 48;
  background: rgba(12,13,16,0.16);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.kd-mega-backdrop[data-open] { opacity: 1; pointer-events: auto; }

/* Painel principal — sai de baixo do header sticky */
.kd-mega-panel {
  position: fixed; left: 0; right: 0; z-index: 49;
  background: rgba(249,250,252,0.98);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid rgba(12,13,16,0.07);
  box-shadow: 0 20px 60px -16px rgba(12,13,16,0.18);
  padding: 1.75rem 0 2rem;
  opacity: 0; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.kd-mega-panel[data-open] { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Cabeçalho de cada painel — label + CTA "Ver todos" */
.kd-mega__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem; padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--ink-100);
}
.kd-mega__label {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-400);
}
.kd-mega__all { font-size: 0.78rem !important; padding: 0.35rem 0.8rem !important; }

/* SERVIÇOS — grid 4 colunas */
.kd-mega-svc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem; }
.kd-mega-svc {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem 0.875rem; border-radius: 10px;
  text-decoration: none; color: var(--ink-800);
  transition: background 180ms ease;
}
.kd-mega-svc:hover { background: rgba(119, 34, 127,0.06); color: var(--ink-950); }
.kd-mega-svc__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--accent-soft); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.kd-mega-svc__name { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; line-height: 1.3; margin-bottom: 0.15rem; }
.kd-mega-svc__desc { font-size: 0.75rem; color: var(--ink-400); line-height: 1.4; }

/* EQUIPA — row flex */
.kd-mega-doc-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.kd-mega-doc {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem; border-radius: 10px;
  text-decoration: none; color: var(--ink-800);
  transition: background 180ms ease;
}
.kd-mega-doc:hover { background: rgba(119, 34, 127,0.06); }
.kd-mega-doc__av {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 9999px;
  background: var(--accent-soft); border: 1px solid rgba(119, 34, 127,0.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--accent);
}
.kd-mega-doc__name { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; }
.kd-mega-doc__role { font-size: 0.72rem; color: var(--ink-400); }

/* Intro de painel mega-menu (usado em Antes/Depois e FAQ) */
.kd-mega-intro { font-size: 0.88rem; color: var(--ink-600); max-width: 60ch; margin-bottom: 1rem; }

/* FAQ — grid 2 colunas */
.kd-mega-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 2rem; }
.kd-mega-faq {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.625rem 0.75rem; border-radius: 8px;
  text-decoration: none; color: var(--ink-700); font-size: 0.86rem; line-height: 1.4;
  transition: background 180ms ease;
}
.kd-mega-faq:hover { background: rgba(119, 34, 127,0.06); color: var(--ink-950); }
.kd-mega-faq__icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* Oculta mega menu em mobile — o nav já está escondido mas por segurança */
@media (max-width: 768px) { .kd-mega-panel, .kd-mega-backdrop { display: none !important; } }

/* Helpers de visibilidade — toggle entre desktop e mobile sem JS */
.kd-only-mobile  { display: none; }
@media (max-width: 768px) {
  .kd-only-desktop { display: none !important; }
  .kd-only-mobile  { display: flex; }
}

/* Drawer lateral mobile — desliza pela direita, ocupa ~78% da viewport (max 380px).
   Estado fechado: deslocado para fora do ecrã via transform; sem capturar eventos. */
.kd-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62%, 280px);
  background: #fff;
  color: var(--accent);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 5rem 1.75rem 2rem;
  border-left: 1px solid var(--ink-200);
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  overflow-y: auto;
}
.kd-mobile-menu[data-open="true"] {
  transform: translateX(0);
  pointer-events: auto;
}
/* Backdrop removido — fica apenas o drawer branco contra o conteúdo da página. */
.kd-mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  padding-block: 0.625rem;
  text-align: center;
  opacity: 0;
  transform: translateX(12px);
  transition: color 200ms ease;
}
.kd-mobile-menu a:hover { color: var(--accent-hover, #5a1860); }
/* Stagger só dispara quando o drawer está aberto */
.kd-mobile-menu[data-open="true"] a {
  animation: kdMenuSlide 380ms var(--ease) forwards;
}
.kd-mobile-menu[data-open="true"] a:nth-child(1) { animation-delay: 80ms; }
.kd-mobile-menu[data-open="true"] a:nth-child(2) { animation-delay: 130ms; }
.kd-mobile-menu[data-open="true"] a:nth-child(3) { animation-delay: 180ms; }
.kd-mobile-menu[data-open="true"] a:nth-child(4) { animation-delay: 230ms; }
.kd-mobile-menu[data-open="true"] a:nth-child(5) { animation-delay: 280ms; }
.kd-mobile-menu[data-open="true"] a:nth-child(6) { animation-delay: 330ms; }
.kd-mobile-menu[data-open="true"] a:nth-child(7) { animation-delay: 380ms; }
@keyframes kdMenuSlide {
  to { opacity: 1; transform: translateX(0); }
}
.kd-mobile-menu__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--accent-soft, #f4ecf9);
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease;
}
.kd-mobile-menu__close:hover { background: rgba(119, 34, 127, 0.16); }

@keyframes kdFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---- Footer ---- */
.kd-footer { background: var(--ink-950); color: var(--ink-300); padding-block: 4rem 2rem; margin-top: 6rem; }
.kd-footer h4 { color: #fff; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; font-family: var(--font-body); font-weight: 600; }
.kd-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
.kd-footer a { color: var(--ink-300); }
.kd-footer a:hover { color: #fff; }
/* Sobre o rodapé escuro o tom tem de ficar CLARO — usar aqui o --ink-400 já
   escurecido daria 4,26:1 em vez dos 5,99:1 actuais. */
.kd-footer__strip { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.8rem; color: #8a8f9a; flex-wrap: wrap; }
@media (max-width: 768px) { .kd-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- Hero "stage" — 3D em fundo full-bleed, texto centrado por cima ----
   Substituiu o hero assimétrico anterior. As animações 3D são agora as protagonistas
   da página; o texto vive centrado sobre a cena com gradient overlay para legibilidade.
   Cada página mantém o seu próprio nome de cena via data-three-scene. */
.kd-hero-stage {
  position: relative;
  min-height: 85dvh;            /* nunca usar h-screen — bug iOS Safari */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;            /* contexto de stacking próprio para o overlay */
  /* Fallback roxo escuro (cor da marca) enquanto o 3D / vídeo não carrega */
  background: #1c0820;
}
/* O 3D ocupa todo o fundo do hero — full-bleed via inset.
   IMPORTANTE: o `.three-mount` original tem `aspect-ratio: 16/9` e `width: 100%`,
   que criariam uma caixa em vez de cobrir tudo. Aqui anulamos esses valores.
   Cor de fundo — gradient roxo da marca Kooldent (ver --accent-* tokens). */
.kd-hero-stage__bg {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  z-index: 0;
  border-radius: 0;              /* full-bleed: sem cantos arredondados no fundo */
  box-shadow: none;              /* anula o inner-shadow do .three-mount */
  /* Gradient da marca — roxo escuro com highlights lilás/rosa subtis,
     espelha o gradient do logo Kooldent oficial */
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(199, 170, 209, 0.28), transparent 60%),
    radial-gradient(80% 60% at 10% 90%, rgba(119, 34, 127, 0.18), transparent 70%),
    linear-gradient(180deg, #38103e, #1c0820);
}
.kd-hero-stage__bg::after {
  /* "scene-name" pequeno em mono no canto inferior direito, marca o slot enquanto não tem cena real */
  content: attr(data-three-scene);
  position: absolute; bottom: 14px; right: 18px;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.28); letter-spacing: 0.10em;
  text-transform: uppercase;
}
/* Vídeo dentro do mount slot — full-bleed cover; usado quando o slot recebe um <video> directamente */
.kd-hero-stage__bg video,
.kd-hero-stage__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* enche o hero, recortando o necessário */
  object-position: center;
  display: block;
  pointer-events: none;  /* media é decorativo */
}
/* Overlay gradient sobre o 3D — garante legibilidade do texto independente da cena */
.kd-hero-stage__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(12, 13, 16, 0.35), rgba(12, 13, 16, 0.78) 90%),
    linear-gradient(180deg, rgba(12, 13, 16, 0.25) 0%, rgba(12, 13, 16, 0.65) 70%, rgba(12, 13, 16, 0.85) 100%);
  pointer-events: none;
}
/* Variante "vídeo": remove o overlay escuro forte e esconde o scene-name label.
   O texto fica legível via text-shadow + vinheta + foco escuro à volta do conteúdo. */
.kd-hero-stage--video .kd-hero-stage__bg::after { content: none; }
.kd-hero-stage--video .kd-hero-stage__overlay {
  /* Vinheta + escurecimento focado na zona central onde o texto vive,
     mantendo a periferia do vídeo (cabelo + bokeh) mais visível.
     Camadas: (1) vinheta global subtil, (2) escurecimento central suave que
     puxa o olhar para o texto, (3) gradiente vertical leve para os CTAs. */
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(12, 13, 16, 0.55) 0%, rgba(12, 13, 16, 0.10) 70%, transparent 100%),
    linear-gradient(180deg, rgba(12, 13, 16, 0.20) 0%, transparent 35%, rgba(12, 13, 16, 0.45) 100%),
    radial-gradient(140% 100% at 50% 50%, transparent 50%, rgba(12, 13, 16, 0.40) 100%);
}
.kd-hero-stage--video .kd-hero-stage__content h1,
.kd-hero-stage--video .kd-hero-stage__content p,
.kd-hero-stage--video .kd-hero-stage__content .kd-eyebrow {
  /* text-shadow forte — garante legibilidade mesmo em frames onde o texto cair sobre dentes brancos */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65), 0 8px 32px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.35);
}
.kd-hero-stage--video .kd-hero-stage__stats dt,
.kd-hero-stage--video .kd-hero-stage__stats dd {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5);
}
/* Conteúdo centrado por cima do overlay */
.kd-hero-stage__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Sem max-width restritivo — deixar o H1 gigante respirar até quase à viewport */
  max-width: min(96rem, 96vw);
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
  color: #fff;
}
.kd-hero-stage__content > * { color: inherit; }
body .kd-hero-stage__content h1 {
  color: #fff;
  /* H1 descritivo (com as palavras-chave de SEO) — é uma frase longa, não um slogan
     de 4 palavras, por isso o cap desceu de 8.5rem para 4.6rem. Acima disso a frase
     ocupava 5 linhas e empurrava tudo o resto para fora da primeira dobra. */
  font-size: clamp(2.1rem, 4.4vw + 0.6rem, 4.6rem);
  letter-spacing: -0.024em;
  line-height: 1.06;
  max-width: 20ch;
  margin-inline: auto;
  /* Equilibra o comprimento das linhas em vez de encher cada uma até ao limite —
     evita a última linha órfã com duas palavras. */
  text-wrap: balance;
}
/* Sobre-título emocional — a frase de marca deixou de ser o H1 (passou a assinatura
   do rodapé) mas continua a abrir o hero, agora em corpo pequeno por cima. */
.kd-hero-stage__overline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.35rem);
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto 1.1rem;
  letter-spacing: 0.005em;
}
/* Faixa de serviços principais, visível ainda acima da dobra (pedido #3):
   letra pequena, separadores "•" maiores e a negrito no tom da marca. */
.kd-hero-stage__services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.55rem;
  margin: 2rem auto 0;
  max-width: 52rem;
  font-size: clamp(0.82rem, 0.35vw + 0.74rem, 0.98rem);
}
.kd-hero-stage__services a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.kd-hero-stage__services a:hover,
.kd-hero-stage__services a:focus-visible { border-bottom-color: var(--accent-lilac); }
.kd-hero-stage__services span {
  font-weight: 700;
  font-size: 1.5em;
  line-height: 0;
  color: var(--accent-lilac);
}
.kd-hero-stage__content p { color: var(--ink-200); margin-inline: auto; max-width: 42rem; }
.kd-hero-stage__content .kd-eyebrow { color: var(--accent); justify-content: center; }
.kd-hero-stage__content .kd-eyebrow::before { background: var(--accent); }
/* CTA centrada e bastante mais para baixo — sensação de respiro generoso */
.kd-hero-stage__ctas { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; margin-top: 5rem; }
/* Stats row centrada (para a homepage) — opcional dentro do __content */
.kd-hero-stage__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.10); text-align: center; }
.kd-hero-stage__stats dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8f9a; /* sobre o hero escuro — ver nota do rodapé */ margin-bottom: 0.25rem; }
.kd-hero-stage__stats dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: #fff; }

@media (max-width: 768px) {
  .kd-hero-stage { min-height: 75dvh; }
  .kd-hero-stage__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .kd-hero-stage__stats dd { font-size: 1.25rem; }
  /* Mobile — desloca o centro do vídeo/animação ligeiramente para a esquerda
     (object-position >50% mostra mais do lado direito da fonte, deslocando o foco para a esquerda no enquadramento). */
  .kd-hero-stage__bg video,
  .kd-hero-stage__bg img {
    object-position: 53% center;
  }
  /* Mobile — H1 muito maior, sub bem reduzido (forte hierarquia tipográfica).
     !important porque várias páginas têm um override genérico `h1 { ... !important }`
     que esmagaria esta regra para o hero principal. */
  body .kd-hero-stage__content h1 {
    font-size: clamp(1.9rem, 7vw, 2.9rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em;
    max-width: 18ch;
  }
  /* Telemóvel — a faixa de serviços passa a duas/três linhas centradas. */
  .kd-hero-stage__services { gap: 0.4rem; margin-top: 1.5rem; max-width: 24rem; }
}

/* Título da secção da equipa — #25. A frase da cliente é uma frase inteira
   (~150 caracteres), não um headline de 4 palavras: ao tamanho normal de h2
   ficava com 9 linhas e lia-se como um parágrafo. Corpo mais contido e
   entrelinha maior fazem-na ler como afirmação, mantendo-a como título. */
.kd-equipa-teaser__text h2 {
  font-size: clamp(1.2rem, 0.9vw + 0.95rem, 1.65rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Ícones dos serviços fornecidos em PNG. Entram como MÁSCARA, não como imagem:
   o PNG define só a forma (canal alfa) e a cor vem de `currentColor`, igual aos
   SVG inline dos restantes serviços. Resultado: os 8 ícones mudam de cor juntos
   no hover, apesar de metade vir de ficheiro e metade de SVG no código. */
.kd-mega-svc__mask {
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
          mask: var(--icone) center / contain no-repeat;
}

/* Arrastar a faixa de avaliações. O cursor de "mão" sinaliza que se pode pegar;
   touch-action:pan-y deixa o scroll vertical da página funcionar normalmente no
   telemóvel, ficando o gesto horizontal para nós. */
/* Sem cursor "grab": com o rato não é preciso premir, basta passar por cima.
   O cursor normal evita prometer um gesto de agarrar que já não existe.
   No toque, o arrasto clássico mantém-se — daí o touch-action. */
.kd-reviews-track { touch-action: pan-y; }
.kd-reviews-pile.is-dragging .kd-reviews-track { user-select: none; }
/* Enquanto se arrasta, a faixa fica parada mesmo que o cursor saia da área —
   caso contrário largava e fugia a meio do gesto. */
.kd-reviews-pile.is-dragging .kd-reviews-track { animation-play-state: paused; }
/* Os botões mantêm o cursor normal — não fazem parte do "pegar". */
.kd-review__more { cursor: pointer; }

/* ── PROVA SOCIAL SEGMENTADA (#15) ─────────────────────────────────────
   Testemunhos de pacientes reais colocados na página do tratamento que a
   avaliação comprova, e ao lado do caso clínico correspondente. A ideia da
   cliente: o utilizador vê o resultado, lê o caso, e só depois encontra a
   experiência de quem passou pelo mesmo — é aí que a confiança fecha.

   Duas variantes: .kd-quote--inline (coluna estreita, junto ao caso clínico)
   e .kd-quote--band (faixa própria, na página do tratamento). */
.kd-quote {
  position: relative;
  background: var(--accent-soft);
  border: 1px solid rgba(119, 34, 127, 0.14);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.5rem;
}
.kd-quote__stars {
  color: var(--accent);
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}
.kd-quote__text {
  margin: 0;
  color: var(--ink-800);
  font-size: 0.95rem;
  line-height: 1.65;
}
.kd-quote__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.kd-quote__who strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-950);
  letter-spacing: 0;
}
/* "G" do Google — sinaliza a origem, tal como nos cartões da homepage. */
.kd-quote__g {
  margin-left: auto;
  font-family: 'Product Sans', var(--font-display), sans-serif;
  font-weight: 700;
  color: var(--accent);
}
/* Variante estreita — cabe na coluna de 340px dos casos clínicos. */
.kd-quote--inline { padding: 1.1rem 1.2rem; }
.kd-quote--inline .kd-quote__text { font-size: 0.88rem; line-height: 1.6; }

/* Variante faixa — secção própria na página do tratamento. */
.kd-quote--band {
  max-width: 46rem;
  margin-inline: auto;
  padding: 2rem 2.25rem;
}
.kd-quote--band .kd-quote__text { font-size: 1.05rem; line-height: 1.72; }

/* Tradução por baixo do original, nas páginas EN — a citação do paciente
   mantém-se nas palavras dele; a tradução é auxiliar e assume-se como tal. */
.kd-quote__translation {
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(119, 34, 127, 0.22);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-600);
  font-style: italic;
}
@media (max-width: 768px) {
  .kd-quote--band { padding: 1.4rem 1.35rem; }
  .kd-quote--band .kd-quote__text { font-size: 0.98rem; }
}

/* ---- Three.js mount slot — reservado para cenas futuras ---- */
.three-mount {
  position: relative;
  aspect-ratio: var(--mount-aspect, 16 / 9);
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Poster fallback gradient — visualmente presentável antes do 3D carregar */
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(119, 34, 127, 0.18), transparent 60%),
    radial-gradient(80% 60% at 10% 90%, rgba(119, 34, 127, 0.10), transparent 70%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
  /* Borda interna subtil — refraction edge (taste-skill §4) */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    var(--shadow-diffusion);
}
/* Marca subtil "scene placeholder" — visível só em dev até a cena 3D real ser plugada */
.three-mount::after {
  content: attr(data-three-scene);
  position: absolute; bottom: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.three-mount canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
  pointer-events: none; /* decorativo enquanto não tiver interactividade */
}

/* Stagger fade-in genérico (MOTION_INTENSITY=6) */
.kd-stagger > * { opacity: 0; transform: translateY(12px); animation: kdFadeUp var(--dur) var(--ease) forwards; }
.kd-stagger > *:nth-child(1) { animation-delay: calc(var(--stagger) * 1); }
.kd-stagger > *:nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
.kd-stagger > *:nth-child(3) { animation-delay: calc(var(--stagger) * 3); }
.kd-stagger > *:nth-child(4) { animation-delay: calc(var(--stagger) * 4); }
.kd-stagger > *:nth-child(5) { animation-delay: calc(var(--stagger) * 5); }
.kd-stagger > *:nth-child(6) { animation-delay: calc(var(--stagger) * 6); }
.kd-stagger > *:nth-child(7) { animation-delay: calc(var(--stagger) * 7); }
.kd-stagger > *:nth-child(8) { animation-delay: calc(var(--stagger) * 8); }

/* ============================================================
   SCROLL REVEALS — elementos sobem + fade-in à medida que entram em viewport
   ------------------------------------------------------------
   Marcadores aplicados pelo `shared/site-motion.js` (IntersectionObserver).
   Stagger automático via custom property `--reveal-delay` calculada por
   índice do irmão. Excluímos elementos dentro de `.kd-hero-stage` (esses
   já têm a sua própria stagger via `.kd-stagger` no carregamento).
   ============================================================ */
.kd-reveal {
  opacity: 0;
  transform: translateY(24px);
  /* duração ligeiramente mais longa que a base para sentir "fluid" */
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.kd-reveal[data-reveal="in"] {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HOVERABLE CARDS — lift + sombra + spotlight roxo a seguir o cursor
   ------------------------------------------------------------
   Aplicado por (a) selectores genéricos abaixo, e (b) atributo `data-hoverable`
   adicionado pelo motion.js a articles e cards dentro de sections (excluindo
   hero-stage e header/footer). O efeito ::before é um radial gradient lilás
   subtil que segue o cursor via custom properties --mx / --my.
   ============================================================ */
[data-hoverable] {
  position: relative;
  /* overflow hidden permite que o spotlight não passe das bordas */
  overflow: hidden;
  /* Estado base — transição fluida em 3 propriedades */
  transition:
    transform 520ms var(--ease),
    box-shadow 520ms var(--ease),
    border-color 520ms var(--ease);
  will-change: transform;
}
/* Spotlight pseudo-element — radial gradient roxo/lilás centrado no cursor */
[data-hoverable]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(199, 170, 209, 0.22),
    rgba(119, 34, 127, 0.06) 35%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 420ms var(--ease);
  pointer-events: none;
  z-index: 0;
}
/* Hover state — lift + sombra colorida + border roxo subtil + spotlight visível */
[data-hoverable]:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 64px -28px rgba(119, 34, 127, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  border-color: rgba(119, 34, 127, 0.32);
}
[data-hoverable]:hover::before { opacity: 1; }
/* Garantir que o conteúdo do card fica acima do ::before */
[data-hoverable] > * { position: relative; z-index: 1; }

/* Links dentro de cards — pequena translação adicional ao hover */
[data-hoverable] a[href]:not(.kd-btn) {
  transition: transform 320ms var(--ease), color 320ms var(--ease);
}

/* ============================================================
   SERVICES BOX — caixa interactiva (tabs verticais) com 8 serviços
   ------------------------------------------------------------
   Lista vertical à esquerda + painel de detalhe à direita.
   Tab switching via JS inline (set aria-selected + data-active).
   Em mobile (<768px) o nav vira horizontal e o painel fica por baixo.
   ============================================================ */
.kd-testimonials {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  background: var(--ink-50);
}
.kd-testimonials__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.25rem;
}
.kd-testimonials__score { text-align: right; }
.kd-score__stars {
  color: var(--accent-rose);
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.35rem;
}
.kd-score__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2vw + 0.7rem, 2.5rem);
  color: var(--ink-950);
  letter-spacing: -0.01em;
  line-height: 1;
}
.kd-score__number small {
  font-size: 0.55em;
  color: var(--ink-500);
  font-weight: 500;
  margin-left: 0.25rem;
}
.kd-score__meta {
  font-size: 0.78rem;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: 0.35rem;
}

/* Faixa horizontal full-bleed — cards sobrepostos em linha a atravessar toda a largura do ecrã.
   Overflow hidden corta os cards nas bordas; os ::before/::after fazem fade para dar a sensação
   de que a faixa continua para lá do viewport (efeito "ribbon"). */
.kd-reviews-pile {
  position: relative;
  width: 100vw;               /* full-bleed: rompe o kd-container */
  left: 50%;
  margin-left: -50vw;
  /* Sem altura fixa: os cartões passaram a crescer com o texto (#4b — a cliente
     queria "menos caixas, maiores, com mais espaço de leitura"). */
  overflow: hidden;
  margin-block: 1rem 0;
}
/* Fade nas bordas esquerda e direita — sugere continuidade */
.kd-reviews-pile::before,
.kd-reviews-pile::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 9vw, 130px);
  z-index: 20;
  pointer-events: none;
}
.kd-reviews-pile::before {
  left: 0;
  background: linear-gradient(to right, var(--ink-50) 10%, transparent);
}
.kd-reviews-pile::after {
  right: 0;
  background: linear-gradient(to left, var(--ink-50) 10%, transparent);
}

/* Faixa interna — flex horizontal que se duplica via JS para loop contínuo */
.kd-reviews-track {
  display: flex;
  gap: 1.5rem;
  padding-block: 1.75rem;
  width: max-content;
  align-items: stretch;      /* todos os cartões ficam com a altura do mais alto */
  /* 50s → 78s: com cartões ~50% mais largos, o mesmo tempo daria a sensação de
     estarem a passar muito mais depressa. Isto mantém a velocidade percebida. */
  animation: kd-marquee 78s linear infinite;
}
/* Pausa enquanto alguém está a ler um comentário expandido. */
.kd-reviews-pile:has(.kd-review.is-expanded) .kd-reviews-track {
  animation-play-state: paused;
}
.kd-reviews-pile:hover .kd-reviews-track {
  animation-play-state: paused;
}
@keyframes kd-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.kd-review {
  position: relative;
  flex-shrink: 0;
  /* ~50% mais largo e sem altura fixa — cabe o comentário completo, que é o que
     a cliente pediu. Em vez de ~5 cartões cortados no ecrã, passam ~3 legíveis. */
  width: clamp(310px, 30vw, 460px);
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  /* Cartões alinhados a direito. Antes cada um tinha uma rotação própria
     (`rotate(var(--r))`, entre -6deg e +6deg) para dar um ar de "pilha de
     papéis"; lia-se como distorção, não como intenção. A faixa é agora uma
     linha recta — o relevo vem só da sombra e do lift no hover. */
  box-shadow:
    0 18px 40px -22px rgba(119, 34, 127, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition:
    transform 360ms var(--ease),
    box-shadow 360ms var(--ease);
}
.kd-review:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 32px 64px -22px rgba(119, 34, 127, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  z-index: 50;
}
.kd-review__rating {
  color: var(--accent-rose);
  letter-spacing: 0.14em;
  font-size: 1rem;
}
.kd-review__quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.4rem;
  color: var(--accent-soft);
  line-height: 0.4;
  margin: 0.1rem 0 -0.35rem;
}
.kd-review__text {
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--ink-800);
  margin: 0;
  /* Corta só ao fim de 6 linhas (era 3). Calibrado contra os comentários reais
     (139–164 caracteres): a esta largura cabem TODOS inteiros, que é o que a
     cliente prefere. O botão "Ler mais" só aparece em comentários mesmo longos —
     os que virão da API do Google. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kd-review.is-expanded .kd-review__text {
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Botão "Ler mais" — injectado por JS só nos cartões cujo texto transborda. */
.kd-review__more {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  margin-top: -0.2rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kd-review__more:hover { color: var(--accent-hover); }

/* Variação visual — a cliente achou os cartões "um pouco monótonos". Um em cada
   três ganha fundo lilás suave e aspas maiores; nada de dados inventados, só ritmo. */
.kd-review[data-variant="tint"] {
  background: var(--accent-soft);
  border-color: rgba(119, 34, 127, 0.14);
}
.kd-review[data-variant="tint"] .kd-review__quote-mark {
  font-size: 3.4rem;
  color: rgba(119, 34, 127, 0.22);
}
.kd-review__author {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 0.6rem;
  align-items: center;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--ink-100);
}
.kd-review__avatar {
  position: relative;      /* âncora para a foto do autor, que a cobre por cima */
  overflow: hidden;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-lilac));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
/* Foto do autor da avaliação. Fica POR CIMA das iniciais, que continuam no HTML:
   se a foto não carregar (o autor apagou-a, a URL do Google rodou, o visitante
   bloqueia domínios externos), o onerror remove o <img> e reaparecem as iniciais
   da marca. Nunca há avatar partido.

   As fotos são servidas pelo CDN da Google, NÃO copiadas para este servidor: se
   alguém apagar a foto ou a avaliação, desaparece daqui sozinha — que é o
   comportamento correcto para dados pessoais de terceiros. */
.kd-review__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
  display: block;
}

.kd-review__author-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-950);
  font-family: var(--font-display);
}
.kd-review__date {
  font-size: 0.78rem;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.kd-review__google {
  /* Pequeno "G" do Google ao lado de cada review — sinaliza fonte */
  font-family: 'Product Sans', var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-400);
}

.kd-testimonials__footer {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  /* Header: empilha o score por baixo do título (em desktop está em 2 colunas) */
  .kd-testimonials__header { grid-template-columns: 1fr; }
  .kd-testimonials__score { text-align: left; }
  /* Pile mantém o look full-bleed + rotações do desktop em mobile.
     Cards ligeiramente mais estreitos para caberem mais no viewport pequeno. */
  .kd-review {
    width: min(86vw, 340px);
    padding: 1.25rem 1.35rem;
  }
  .kd-review__text { font-size: 0.94rem; }
}

/* ============================================================
   CURSOR FOLLOWER — "sombrinha" lilás que persegue o cursor pela página
   ------------------------------------------------------------
   Elemento <div> criado dinamicamente pelo `site-motion.js` e injectado
   no <body>. Position fixed, pointer-events none (não bloqueia cliques).
   A transição linear curta cria o efeito de "drag" subtil, como se o
   glow estivesse a ser puxado pelo cursor com inércia.
   Escondido automaticamente em touch devices e quando o utilizador prefere
   menos movimento (prefers-reduced-motion).
   ============================================================ */
.kd-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  /* Reduzido de 460→320px: menos pixéis para o GPU repintar a cada frame. */
  width: 320px;
  height: 320px;
  border-radius: 9999px;
  /* Stops extra (transparent a partir de ~62%) substituem o filter: blur(10px),
     que era catastrófico — um post-filter de blur de 460² pixéis recalculava
     a cada frame de movimento e provocava jank visível em /servicos/ e similares. */
  background: radial-gradient(
    circle at center,
    rgba(119, 34, 127, 0.18) 0%,
    rgba(199, 170, 209, 0.10) 22%,
    rgba(119, 34, 127, 0.04) 45%,
    transparent 62%
  );
  pointer-events: none;
  z-index: 5;
  /* Estado inicial — invisível e fora do viewport até o primeiro mousemove */
  transform: translate3d(-9999px, -9999px, 0);
  opacity: 0;
  /* TRANSITION DO TRANSFORM REMOVIDA. O JS já posiciona via translate3d em rAF
     (1 update por frame); ter "transition: transform 380ms" sobre um elemento
     que se move continuamente forçava o browser a interpolar centenas de
     transições aninhadas — a causa principal da lentidão sentida nos hover. */
  transition: opacity 220ms var(--ease);
  will-change: transform, opacity;
}
/* Estado activo — JS adiciona quando o cursor está a mover, remove após idle timer */
.kd-cursor-follower[data-active="true"] {
  opacity: 1;
}
/* Esconder em touch / sem hover real */
@media (hover: none), (pointer: coarse) {
  .kd-cursor-follower { display: none; }
}

/* Acessibilidade — reduzir movimento se o utilizador preferir */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    /* Sem zerar também o atraso, quem pede menos movimento continuava a
       esperar até ~700ms pelo stagger antes de ver o conteúdo aparecer. */
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .kd-reveal { opacity: 1; transform: none; transition: none; }
  [data-hoverable]::before { display: none; }
  [data-hoverable]:hover { transform: none; }
  .kd-cursor-follower { display: none; }
}

/* Section helper — ritmo vertical generoso (VISUAL_DENSITY=4) */
.kd-section { padding-block: clamp(4rem, 8vw, 7rem); }
.kd-section--dark { background: var(--ink-950); color: var(--ink-100); }
.kd-section--dark h1, .kd-section--dark h2, .kd-section--dark h3 { color: #fff; }
.kd-section--dark p { color: var(--ink-300); }

/* Eyebrow label — pequena tag acima dos títulos (anti-slop, sinaliza secção) */
.kd-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.kd-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
/* Variante com símbolo da marca Kooldent (folha de marca) — troca o traço por um ícone. */
.kd-eyebrow--sym::before { display: none; }
.kd-eyebrow--sym > svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   SERVICES CAROUSEL — carrossel cinemático full-bleed (homepage)
   ------------------------------------------------------------
   Estrutura: .kd-services-fullbleed > .kd-services-carousel
   Cada slide é position:absolute, apenas o [data-active="true"] tem opacity:1.
   Conteúdo por slide anima (fade + slide-up) quando o slide activa.
   Chips no fundo permitem navegação directa; setas prev/next; auto-advance 5s.
   ============================================================ */
.kd-services-carousel {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 82vh, 940px);
  overflow: hidden;
  background: var(--ink-950);
}

/* Cada slide — empilhado, invisible por omissão */
.kd-services-carousel__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 800ms var(--ease);
  will-change: opacity;
}
.kd-services-carousel__slide[data-active="true"] {
  opacity: 1;
  z-index: 1;
}

/* Overlay — gradiente pesado em baixo para legibilidade do texto */
.kd-services-carousel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(12,13,16,0.95) 0%,
      rgba(12,13,16,0.70) 25%,
      rgba(12,13,16,0.28) 50%,
      rgba(12,13,16,0.08) 68%,
      transparent 82%
    ),
    radial-gradient(140% 100% at 50% 100%, transparent 52%, rgba(12,13,16,0.28) 100%);
}

/* Bloco de conteúdo — ancorado em baixo, acima do overlay */
.kd-services-carousel__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
}
/* Reservar a esquerda para a sidebar flutuante — texto começa depois da sidebar */
.kd-services-carousel__content > .kd-container {
  padding-left: clamp(13rem, 20vw, 19rem);
  padding-right: 2rem;
}

/* Cada filho do .kd-container dentro do conteúdo começa invisível */
.kd-services-carousel__content > .kd-container > * {
  opacity: 0;
  transform: translateY(20px);
}

/* Quando o slide activa, os filhos animam em sequência (stagger) */
.kd-services-carousel__slide[data-active="true"] .kd-services-carousel__content > .kd-container > * {
  animation: kdCarouselIn 620ms var(--ease) both;
}
.kd-services-carousel__slide[data-active="true"] .kd-services-carousel__content > .kd-container > *:nth-child(1) { animation-delay: 100ms; }
.kd-services-carousel__slide[data-active="true"] .kd-services-carousel__content > .kd-container > *:nth-child(2) { animation-delay: 190ms; }
.kd-services-carousel__slide[data-active="true"] .kd-services-carousel__content > .kd-container > *:nth-child(3) { animation-delay: 270ms; }
.kd-services-carousel__slide[data-active="true"] .kd-services-carousel__content > .kd-container > *:nth-child(4) { animation-delay: 350ms; }
.kd-services-carousel__slide[data-active="true"] .kd-services-carousel__content > .kd-container > *:nth-child(5) { animation-delay: 430ms; }
@keyframes kdCarouselIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Eyebrow dentro do carousel — branco semi-transparente */
.kd-services-carousel__content .kd-eyebrow {
  color: rgba(255,255,255,0.60);
}
.kd-services-carousel__content .kd-eyebrow::before {
  background: rgba(255,255,255,0.35);
}

/* Título do serviço */
body .kd-services-carousel__content h3 {
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4rem);
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0.25rem 0 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.40);
}

/* Descrição curta */
.kd-services-carousel__content > .kd-container > p {
  color: rgba(255,255,255,0.80);
  max-width: 52ch;
  font-size: clamp(0.95rem, 0.4vw + 0.82rem, 1.08rem);
  line-height: 1.65;
  margin: 0 0 1.25rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

/* Feature pills — horizontal, scroll se necessário */
.kd-services-carousel__features {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kd-services-carousel__features li {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* CTAs */
.kd-services-carousel__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.kd-services-carousel__cta .kd-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.28);
  background: transparent;
}
.kd-services-carousel__cta .kd-btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.50);
  color: #fff;
}

/* Setas prev/next — centradas verticalmente, à esquerda */
.kd-services-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 280ms var(--ease), border-color 280ms var(--ease), transform 280ms var(--ease);
  line-height: 1;
}
.kd-services-carousel__arrow:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.40);
}
.kd-services-carousel__arrow:active {
  transform: translateY(-50%) scale(0.90);
}
/* Setas agrupadas à direita, uma acima da outra */
.kd-services-carousel__arrow--prev {
  right: clamp(1rem, 3vw, 2.5rem);
  top: calc(50% - 2rem);
}
.kd-services-carousel__arrow--next {
  right: clamp(1rem, 3vw, 2.5rem);
  top: calc(50% + 2rem);
}

/* ── SIDEBAR lateral — balão vertical flutuante com botões por serviço ──
   Posição: centro-esquerdo do carousel. Backdrop blur + bordas suaves.
   Em mobile (<768px) transforma-se numa barra horizontal no fundo. */
.kd-services-carousel__sidebar {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  /* Balão semi-transparente — mesma linguagem do header glassmorphism */
  background: rgba(10,11,14,0.58);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* Não cresce além de 80% da altura disponível */
  max-height: 80dvh;
  overflow-y: auto;
  scrollbar-width: none;
}
.kd-services-carousel__sidebar::-webkit-scrollbar { display: none; }

/* Cada botão de serviço na sidebar */
.kd-services-carousel__sidebar button {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 13px;
  color: rgba(255,255,255,0.46);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0.6rem 1rem;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition:
    background 240ms var(--ease),
    color 240ms var(--ease),
    border-color 240ms var(--ease);
}
.kd-services-carousel__sidebar button:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.12);
}
/* Botão activo — destaque roxo, bordas coloridas */
.kd-services-carousel__sidebar button[aria-selected="true"] {
  background: rgba(119, 34, 127,0.30);
  color: #fff;
  border-color: rgba(119, 34, 127,0.52);
  font-weight: 600;
}

/* Barra de progresso — linha fina no topo que avança com o timer */
.kd-services-carousel__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(to right, var(--accent-lilac), var(--accent-rose));
  z-index: 5;
  width: 0%;
  transform-origin: left;
  pointer-events: none;
}

@media (max-width: 768px) {
  .kd-services-carousel { min-height: clamp(480px, 80vh, 720px); }

  /* Setas: ocultas em mobile — swipe substitui */
  .kd-services-carousel__arrow { display: none; }

  /* Sidebar com a lista de tratamentos — escondida em mobile (era pouco legível
     como barra horizontal). Navegação faz-se por swipe + auto-advance. */
  .kd-services-carousel__sidebar { display: none !important; }

  /* Conteúdo: ocupa toda a altura do slide para podermos colocar texto no topo
     e CTAs no fundo em cantos opostos (intercalado por slide). */
  .kd-services-carousel__content {
    inset: 0;
    padding: clamp(1.5rem, 4vw, 2rem) 0 clamp(1.5rem, 4vh, 2.25rem);
    display: flex;
    flex-direction: column;
  }
  .kd-services-carousel__content > .kd-container {
    padding-left: clamp(1rem, 4vw, 1.5rem) !important;
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .kd-services-carousel__features { display: none; }
  body .kd-services-carousel__content h3 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .kd-services-carousel__content > .kd-container > p { font-size: 0.92rem; max-width: 100%; }

  /* CTAs — muito mais pequenos em mobile, empurrados para o fundo */
  .kd-services-carousel__cta {
    margin-top: auto;
    gap: 0.4rem;
    flex-wrap: nowrap;
  }
  .kd-services-carousel__cta .kd-btn {
    padding: 0.38rem 0.78rem;
    font-size: 0.72rem;
    border-radius: 7px;
    gap: 0.3rem;
    line-height: 1.2;
    min-height: 0;
  }
  .kd-services-carousel__cta .kd-btn svg { width: 10px; height: 10px; }

  /* INTERCALAÇÃO — slides ímpares (1.º, 3.º, 5.º, 7.º) → texto top-left, CTA bottom-right.
     Os slides são child 2, 4, 6, 8 (child 1 é a progress bar) → :nth-child(even). */
  .kd-services-carousel__slide:nth-child(even) > .kd-services-carousel__content > .kd-container {
    align-items: flex-start;
    text-align: left;
  }
  .kd-services-carousel__slide:nth-child(even) .kd-services-carousel__cta {
    align-self: flex-end;
  }
  /* Slides pares (2.º, 4.º, 6.º, 8.º) → texto top-right, CTA bottom-left.
     Estes slides são child 3, 5, 7, 9 → :nth-child(odd). */
  .kd-services-carousel__slide:nth-child(odd) > .kd-services-carousel__content > .kd-container {
    align-items: flex-end;
    text-align: right;
  }
  .kd-services-carousel__slide:nth-child(odd) .kd-services-carousel__cta {
    align-self: flex-start;
  }
  /* Eyebrow/h3/p ocupam só o espaço do seu conteúdo (não o full width)
     para que o text-align com align-items funcione visualmente. */
  .kd-services-carousel__content > .kd-container > .kd-eyebrow,
  .kd-services-carousel__content > .kd-container > h3,
  .kd-services-carousel__content > .kd-container > p {
    width: auto;
    max-width: 92%;
  }
}

/* ============================================================
   PILARES — cards com fundo fotográfico ("Porquê Kooldent")
   Cada card é um container position:relative com a foto como
   camada absoluta no fundo, overlay gradiente para legibilidade,
   e o texto a flutuar sobre tudo via z-index.
   ============================================================ */
.kd-pillar {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  /* Mais alto para o layout diagonal — a fotografia precisa de espaço vertical */
  min-height: clamp(420px, 58vh, 580px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-diffusion);
}

/* A foto ocupa todo o card — escala suavemente no hover */
.kd-pillar__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 700ms var(--ease);
}
.kd-pillar:hover .kd-pillar__photo { transform: scale(1.05); }

/* Gradiente escuro em baixo — garante legibilidade do texto */
.kd-pillar__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 11, 14, 0.92) 0%,
    rgba(10, 11, 14, 0.52) 48%,
    rgba(10, 11, 14, 0.15) 100%
  );
}

/* O conteúdo fica acima de foto + overlay via z-index */
.kd-pillar__body {
  position: relative;
  z-index: 1;
  padding: 2rem;
}

.kd-pillar__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(119, 34, 127, 0.32);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.kd-pillar h3 { color: #fff; font-size: 1.1rem; margin-bottom: 0.5rem; }
.kd-pillar p  { color: rgba(255, 255, 255, 0.74); font-size: 0.95rem; margin: 0; }

/* Card sem foto — gradiente de marca roxo/escuro */
.kd-pillar--brand {
  background: linear-gradient(145deg, var(--ink-950) 0%, #2c0b31 100%);
}
/* No card de marca o icon tem fundo lilás claro para respirar */
.kd-pillar--brand .kd-pillar__icon { background: rgba(119, 34, 127, 0.18); }

/* Equipa teaser — em mobile o botão "Conhecer toda a equipa" passa para depois da foto.
   Usa display:contents para "achatar" o div de texto e poder reordenar elementos
   individualmente via order. */
@media (max-width: 768px) {
  .kd-equipa-teaser__text { display: contents; }
  .kd-equipa-teaser__photo { order: 1; }
  .kd-equipa-teaser__cta   { order: 2; align-self: start; justify-self: center; width: auto; }
}

/* Em mobile empilha os cards verticalmente (1 coluna), elimina o zigzag diagonal */
@media (max-width: 768px) {
  /* Container "Porquê Kooldent?" — flex horizontal vira coluna empilhada */
  .kd-section .kd-stagger[style*="flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 2rem !important;
    gap: 1rem !important;
  }
  /* Cada pillar — reset do flex/margin desktop, altura adequada para mobile */
  .kd-pillar {
    flex: none !important;
    margin-top: 0 !important;
    width: 100%;
    min-height: clamp(320px, 56vw, 420px);
  }
  .kd-pillar__body { padding: 1.5rem; }
  .kd-pillar h3 { font-size: 1.15rem; }
  .kd-pillar p  { font-size: 0.95rem; line-height: 1.5; }
}

/* ============================================================
   Compare slider — antes/depois interactivo
   Partilhado por todas as páginas que usam [data-compare].
   O JS inicializador vive em /shared/compare.js.
   ============================================================ */
.kd-cmp{position:relative;overflow:hidden;cursor:col-resize;user-select:none;touch-action:none;--split:50%}
.kd-cmp__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none}
.kd-cmp__img--before{position:relative}
.kd-cmp__img--after{position:absolute;inset:0;clip-path:polygon(var(--split) 0,100% 0,100% 100%,var(--split) 100%)}
.kd-cmp__divider{position:absolute;inset-block:0;left:var(--split);transform:translateX(-50%);width:2px;background:rgba(255,255,255,.9);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 2px 12px rgba(0,0,0,.16)}
.kd-cmp__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;color:var(--ink-700);cursor:col-resize;pointer-events:auto}
.kd-cmp__knob:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kd-cmp__lbl{position:absolute;bottom:.875rem;font-family:var(--font-mono,monospace);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,11,14,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.25rem .6rem;border-radius:4px;pointer-events:none}
.kd-cmp__lbl--l{left:.875rem}
.kd-cmp__lbl--r{right:.875rem}

/* Knob central do slider — SVG interno reduzido para não roubar espaço da transição */
.kd-cmp__knob svg{width:10px;height:10px}

/* ========== PT/EN language toggle ==========
   Botão pill pequeno, distingue-se dos restantes links da nav.
   Mesma classe na nav desktop e no menu mobile (herda layout do contexto). */
.kd-header__lang {
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.32rem 0.6rem !important;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  text-transform: uppercase;
  color: var(--ink-700) !important;
  text-decoration: none;
  align-self: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kd-header__lang:hover {
  background-color: var(--ink-950);
  color: #fff !important;
  border-color: var(--ink-950);
}
/* No menu mobile o link herda font-display 1.4rem — reduzimos para o pill ficar discreto */
.kd-mobile-menu .kd-header__lang {
  font-family: var(--font-sans, system-ui) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  display: inline-block;
  width: fit-content;
  align-self: center;
  margin-top: 0.5rem;
}

/* ============================================================
   BLOCO FINAL «O SEU CASO» — fecho escuro e centrado
   ------------------------------------------------------------
   Usado no fim das páginas de serviços, FAQ e privacidade, dentro de uma
   .kd-section--dark. Empilha, ao centro: etiqueta, título, texto, botão
   principal e uma linha com os três contactos directos.
   ============================================================ */
.kd-case { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kd-case p { margin: 1.25rem 0 2rem; max-width: 56ch; }
/* Sem parágrafo (página de marcação), o botão precisa do seu próprio espaço por cima */
.kd-case h2 + .kd-btn { margin-top: 2rem; }
/* O negrito tem de saltar à vista sobre o cinzento do parágrafo */
.kd-case p strong { color: #fff; }
/* flex-wrap: em ecrãs estreitos, os contactos passam para linhas seguintes sozinhos */
.kd-case__contacts { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.kd-case__contacts a {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 1rem 1.25rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  color: #fff; font-weight: 600;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.kd-case__contacts a:hover { border-color: var(--accent-lilac); background: rgba(255, 255, 255, 0.08); }
.kd-case__contacts svg { flex-shrink: 0; }
/* Legenda por baixo de cada contacto */
.kd-case__sub { display: block; font-size: 0.8rem; font-weight: 400; color: var(--ink-300); margin-top: 0.125rem; }