/* ==========================================================================
   pimidias.css — identidade e layout do site da Pi Mídias
   Base preta (pedido explícito do cliente). Azul é tempero, não protagonista.
   Linguagem editorial: tipografia grande em caixa-baixa, muito respiro e
   inversão de fundo entre blocos.
   Depende de base.css (carregar base.css antes).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de marca — Pi Mídias
   -------------------------------------------------------------------------- */
:root {
  /* ======================================================================
     PALETA — ÚNICO LUGAR QUE MUDA NUMA TROCA DE MARCA

     Nenhuma cor aparece fora deste bloco, em nenhum arquivo CSS ou HTML.
     As variantes translúcidas derivam dos canais RGB abaixo, então trocar
     um acento é trocar UMA linha — todos os gradientes, halos, bordas e
     anéis de foco acompanham sozinhos.

     A identidade está em redesenho (docs/BRIEFING-MARCA.md). O azul elétrico
     abaixo é a definição do cliente para o acento. Ao fechar a rota de marca,
     altere apenas os canais RGB e os hexadecimais desta seção.
     ====================================================================== */

  /* Canais RGB — a origem de tudo que tem transparência

     O preto NÃO é neutro: tem um viés azul (8, 9, 11 em vez de 10, 10, 10).
     É isso que faz o acento azul pertencer à página em vez de parecer colado
     por cima — o mesmo truque que Linear e Vercel usam no dark mode. Preto
     neutro com acento azul nunca concorda; preto azulado com azul, sim. */
  --pm-black-rgb: 8, 9, 11;
  --pm-white-rgb: 247, 248, 250;
  --pm-brand-rgb: 94, 155, 245;   /* azul da marca */
  --pm-accent-rgb: 94, 155, 245;  /* acento sobre o preto — 7.1:1, passa AA */
  --pm-pf-rgb: 94, 155, 245;       /* acento do bloco da produtora */
  --pm-danger-rgb: 255, 107, 107;

  /* Neutros */
  --pm-black: rgb(var(--pm-black-rgb));   /* fundo principal */
  --pm-black-2: #101217;                  /* seções alternadas / cards */
  --pm-line: #1E222A;                     /* bordas e divisórias */
  --pm-white: rgb(var(--pm-white-rgb));   /* títulos */
  --pm-white-dim: #DFE3EA;                /* branco em hover */
  --pm-gray: #9CA5B4;                     /* corpo — 8.1:1 sobre o preto, AA e AAA */
  --pm-gray-dim: #7C8595;                 /* apoio — 5.3:1 sobre #101217, passa AA */
  --pm-placeholder: #656E7D;
  --pm-card: #101217;
  --pm-card-hover: #161A21;
  --pm-frame-bg: #000000;                 /* letterbox do vídeo */

  /* Marca */
  --pm-blue: rgb(var(--pm-brand-rgb));
  --pm-accent: rgb(var(--pm-accent-rgb));
  --pm-accent-hover: #83B4F8;
  --pm-on-accent: #05101F;                /* texto sobre o acento — 9.4:1 */

  /* Derivados translúcidos */
  --pm-accent-soft: rgba(var(--pm-accent-rgb), 0.12);
  --pm-accent-line: rgba(var(--pm-accent-rgb), 0.32);
  --pm-accent-ring: rgba(var(--pm-accent-rgb), 0.2);
  --pm-accent-glow: rgba(var(--pm-accent-rgb), 0.22);
  --pm-brand-08: rgba(var(--pm-brand-rgb), 0.08);
  --pm-brand-15: rgba(var(--pm-brand-rgb), 0.15);
  --pm-brand-35: rgba(var(--pm-brand-rgb), 0.35);
  --pm-brand-40: rgba(var(--pm-brand-rgb), 0.4);
  --pm-brand-50: rgba(var(--pm-brand-rgb), 0.5);
  --pm-brand-55: rgba(var(--pm-brand-rgb), 0.55);
  --pm-header-bg: rgba(var(--pm-black-rgb), 0.72);
  --pm-header-bg-solid: rgba(var(--pm-black-rgb), 0.95);
  --pm-hairline: rgba(var(--pm-white-rgb), 0.045);
  --pm-tint: rgba(var(--pm-white-rgb), 0.02);

  /* Bloco invertido (fundo claro) */
  --pm-ink: #08090B;        /* títulos sobre branco */
  --pm-ink-2: #1C1F26;      /* corpo sobre branco */
  --pm-ink-3: #565E6B;      /* apoio sobre branco — 7.0:1 */
  --pm-ink-line: #E2E5EA;

  /* Acento do bloco da Pi Filmes. Mesmo azul da marca-mãe: o cliente
     descartou o dourado, e o parentesco entre as duas passa a ser a cor. */
  --pm-pf-accent: rgb(var(--pm-pf-rgb));
  --pm-pf-hover: #83B4F8;
  --pm-on-pf: #05101F;
  --pm-pf-line: rgba(var(--pm-pf-rgb), 0.28);

  /* Estado de erro */
  --pm-danger: rgb(var(--pm-danger-rgb));
  --pm-danger-text: #FF8F8F;                        /* 6.4:1 sobre #121212 */
  --pm-danger-ring: rgba(var(--pm-danger-rgb), 0.15);
  --pm-danger-soft: rgba(var(--pm-danger-rgb), 0.1);
  --pm-danger-line: rgba(var(--pm-danger-rgb), 0.5);

  /* WhatsApp — cor funcional da plataforma, não da marca */
  --pm-whats: #1FAF54;
  --pm-whats-hover: #26C662;
  --pm-on-whats: #04140A;

  /* Tipografia — uma família só, editorial. O peso e o corpo fazem a
     hierarquia; o display é caixa-baixa, apertado e grande. */
  --font-display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Nomes neutros usados por base.css (portfólio de vídeos) */
  --acento: var(--pm-accent);
  --superficie: var(--pm-card);
  --linha: var(--pm-line);
  --texto-forte: var(--pm-white);

  --focus: var(--pm-accent);
  --on-focus: var(--pm-on-accent);
  --header-h: 4.5rem;
}

/* --------------------------------------------------------------------------
   2. Base da página
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  background: var(--pm-black);
  color: var(--pm-gray);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--pm-white);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-4xl); letter-spacing: -0.035em; }

/* Caixa-baixa é o tratamento de título do site inteiro, não só do hero.
   Nome próprio dentro de um título usa .caps para manter a caixa original. */
h2 {
  font-size: clamp(1.875rem, 1.2rem + 3vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: lowercase;
}

h2 .caps, h3 .caps { text-transform: none; }

/* Ênfase dentro de título de seção: sem itálico, na cor de acento — o mesmo
   tratamento que o <em> tem no h1 do hero. */
h2 em, h3 em {
  font-style: normal;
  color: var(--pm-accent);
}
h3 {
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}
h4 { font-size: var(--fs-base); }

::selection {
  background: var(--pm-accent);
  color: var(--pm-black);
}

/* Rótulo de seção (kicker) */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pm-accent);
}

.kicker::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--pm-accent);
  opacity: 0.7;
}

.section__head--center .kicker::before { display: none; }

.lead {
  font-size: var(--fs-lg);
  color: var(--pm-gray);
  margin-top: var(--space-4);
}

.section--alt { background: var(--pm-black-2); }

/* Divisória fina entre blocos */
.rule { height: 1px; background: var(--pm-line); border: 0; }

/* Marcação visível de placeholder — some quando o cliente preencher */
.ph {
  color: var(--pm-accent);
  background: var(--pm-accent-soft);
  border: 1px dashed var(--pm-accent-line);
  border-radius: 4px;
  padding: 0.05em 0.4em;
  font-size: 0.95em;
  font-weight: 500;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primário — azul elevado com texto preto: 6.9:1 */
.btn--primary {
  background: var(--pm-accent);
  color: var(--pm-on-accent);
}

.btn--primary:hover { background: var(--pm-accent-hover); }

/* Secundário — contorno */
.btn--ghost {
  background: transparent;
  color: var(--pm-white);
  border-color: var(--pm-line);
}

.btn--ghost:hover {
  border-color: var(--pm-accent);
  color: var(--pm-accent);
}

/* Sólido claro */
.btn--light {
  background: var(--pm-white);
  color: var(--pm-black);
}

.btn--light:hover { background: var(--pm-white-dim); }

.btn--lg { padding: 1.0625rem 2rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn__icon { width: 1.05em; height: 1.05em; flex: none; }

/* Link com seta */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--pm-accent);
  transition: gap var(--dur) var(--ease);
}

.arrow-link:hover { gap: 0.8rem; }
.arrow-link svg { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   4. Header fixo
   -------------------------------------------------------------------------- */
/* IMPORTANTE: o backdrop-filter vive num pseudo-elemento, não no próprio
   header. Um ancestral com backdrop-filter/filter/transform vira containing
   block de qualquer descendente position:fixed — e o menu mobile é fixed
   dentro do header. Com o filtro no header, o menu aberto ficava preso à
   altura do header em vez de ocupar a tela. Não mover o filtro de volta. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pm-header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color var(--dur) var(--ease);
}

.site-header.is-scrolled { border-bottom-color: var(--pm-line); }
.site-header.is-scrolled::before { background: var(--pm-header-bg-solid); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
  padding-block: 0.75rem;
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--pm-white);
}

.brand svg { height: 2.125rem; width: auto; }

/* Navegação desktop */
.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
}

.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--pm-gray);
  padding-block: 0.4rem;
  transition: color var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--pm-white); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--pm-accent);
  transition: width var(--dur) var(--ease);
}

.nav__link:hover::after { width: 100%; }

/* Link destacado da Pi Filmes — braço audiovisual */
.nav__pifilmes {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--pm-brand-35), var(--pm-brand-08));
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.nav__pifilmes:hover,
.nav__pifilmes:focus-visible { border-color: var(--pm-accent); }

.nav__pifilmes strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--pm-white);
}

.nav__pifilmes span {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-accent);
}

.header__cta { flex: none; }

/* Botão hambúrguer */
.menu-toggle {
  display: none;
  flex: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-sm);
  color: var(--pm-white);
}

.menu-toggle__bars {
  position: relative;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  transition: background-color var(--dur) var(--ease);
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Menu mobile
   -------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .menu-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: var(--z-menu);
    margin-left: 0;
    padding: var(--space-6) var(--gutter) var(--space-8);
    background: var(--pm-black);
    border-top: 1px solid var(--pm-line);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* fechado: fora da árvore de foco e sem interação */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      visibility 0s linear var(--dur);
  }

  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li { border-bottom: 1px solid var(--pm-line); }

  .nav__link {
    display: block;
    padding: 1.05rem 0;
    font-size: var(--fs-xl);
    font-family: var(--font-display);
    color: var(--pm-white);
  }

  .nav__link::after { display: none; }

  .nav__list li:has(.nav__pifilmes) { border-bottom: 0; }

  .nav__pifilmes {
    margin-top: var(--space-5);
    padding: 1rem 1.25rem;
  }

  .nav__pifilmes strong { font-size: var(--fs-lg); }

  .header__cta { display: none; }

  /* CTA aparece dentro do menu aberto */
  .nav__cta {
    display: block;
    margin-top: var(--space-5);
  }
}

@media (min-width: 62.0625rem) {
  .nav__cta { display: none; }
}

/* Trava o scroll do body com menu aberto */
body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Hero editorial

   Tipografia em caixa-baixa, corpo enorme e entrelinha fechada. O fundo é
   preto liso: quem carrega a tela é a letra, não o efeito. O único
   ornamento é a tira de decimais de π — π é a origem do nome da empresa e
   é um número que nunca se repete, que é exatamente o argumento do negócio.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(34rem, 94svh);
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4rem));
  padding-bottom: 0;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Halo de brasa, baixo e discreto: dá profundidade ao preto sem competir. */
.hero__glow {
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: min(52rem, 100vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pm-brand-15) 0%, transparent 68%);
  filter: blur(40px);
}

.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero__inner { max-width: 68rem; }

/* Assinatura pequena no alto do bloco de texto */
.hero__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(0.6875rem, 0.62rem + 0.3vw, 0.8125rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--pm-gray-dim);
}

.hero__label::before {
  content: "";
  flex: none;
  width: clamp(1.5rem, 5vw, 2.5rem);
  height: 1px;
  background: var(--pm-accent);
}

/* O bloco tipográfico. clamp() vai de 40px no celular a 148px no desktop. */
.hero h1 {
  font-size: clamp(2.5rem, 9.5vw, 9.25rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  color: var(--pm-accent);
}

/* Segunda linha da headline, em peso leve: o contraste de peso dentro da
   mesma família é o que dá o ar editorial. */
.hero h1 .light {
  font-weight: 300;
  color: var(--pm-white-dim);
}

.hero__sub {
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.4375rem);
  line-height: 1.45;
  max-width: 34rem;
  color: var(--pm-gray);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* Link de texto com seta, no lugar de um segundo botão pesado */
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-base);
  color: var(--pm-white);
  text-decoration: none;
  border-bottom: 1px solid var(--pm-line);
  padding-bottom: 0.25rem;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hero__link:hover { color: var(--pm-accent); border-color: var(--pm-accent); }
.hero__link .arrow { transition: transform var(--dur) var(--ease); }
.hero__link:hover .arrow { transform: translateX(0.25rem); }

/* --------------------------------------------------------------------------
   Tira de π — assinatura da marca no pé do hero.

   Os decimais correm em loop e nunca se repetem, que é o mesmo argumento
   escrito na seção seguinte. Puro CSS: duas cópias da faixa deslizando,
   sem JS e sem custo de layout (só transform).
   -------------------------------------------------------------------------- */
.pi-strip {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--pm-line);
  border-bottom: 1px solid var(--pm-line);
  overflow: hidden;
  padding-block: 0.85rem;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-solid) 12%, var(--mask-solid) 88%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--mask-solid) 12%, var(--mask-solid) 88%, transparent);
}

.pi-strip__track {
  display: flex;
  width: max-content;
  animation: pi-run 90s linear infinite;
}

.pi-strip__run {
  flex: none;
  padding-right: 3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--pm-placeholder);
}

.pi-strip__run b {
  color: var(--pm-accent);
  font-weight: 500;
}

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

@media (prefers-reduced-motion: reduce) {
  .pi-strip__track { animation: none; }
}

/* --------------------------------------------------------------------------
   6b. Bloco invertido — fundo claro, texto preto.

   A quebra de fundo entre um bloco e outro é o recurso de ritmo da página:
   depois de uma tela inteira de preto, o branco funciona como respiro e
   marca que começou outro assunto.
   -------------------------------------------------------------------------- */
.section--invert {
  background: var(--pm-white);
  color: var(--pm-ink-2);
}

.section--invert h2,
.section--invert h3 { color: var(--pm-ink); }
.section--invert .kicker { color: var(--pm-ink-3); }
.section--invert .kicker::before { background: var(--pm-accent); opacity: 1; }
.section--invert a { color: var(--pm-ink); }

/* Manifesto: título gigante e duas colunas de texto de pesos diferentes. */
.manifesto__title {
  font-size: clamp(2.125rem, 6.2vw, 5.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  max-width: 22ch;
}

.manifesto__title em {
  font-style: normal;
  color: var(--pm-accent);
}

.manifesto__cols {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .manifesto__cols {
    grid-template-columns: 1.35fr 1fr;
    align-items: start;
  }
}

.manifesto__lead {
  font-size: clamp(1.125rem, 0.95rem + 0.85vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--pm-ink);
}

.manifesto__lead + .manifesto__lead { margin-top: 1em; }

.manifesto__aside {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--pm-ink-3);
}

.manifesto__aside p + p { margin-top: 1em; }

/* Lista de serviços em tipografia grande, no lugar de cards */
.manifesto__index {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--pm-ink-line);
}

.manifesto__index li {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 3vw, 2rem);
  padding-block: clamp(0.75rem, 2vw, 1.15rem);
  border-bottom: 1px solid var(--pm-ink-line);
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  color: var(--pm-ink);
}

/* Nome próprio dentro de uma lista em caixa-baixa mantém a caixa original */
.manifesto__index li .caps {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}

.manifesto__index li > span:not(.caps) {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--pm-accent);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   7. Serviços
   -------------------------------------------------------------------------- */
.service {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.125rem);
  background: var(--pm-card);
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.service:hover {
  border-color: var(--pm-accent-line);
  background: var(--pm-card-hover);
  transform: translateY(-4px);
}

.service__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--pm-brand-50), var(--pm-accent-soft));
  border: 1px solid var(--pm-accent-line);
  color: var(--pm-accent);
}

.service__icon svg { width: 1.375rem; height: 1.375rem; }

.service h3 { margin-bottom: var(--space-3); }

.service__pitch {
  color: var(--pm-gray);
  margin-bottom: var(--space-5);
}

.service__list {
  display: grid;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--pm-line);
}

.service__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--pm-gray);
}

.service__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--pm-accent);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   8. Como trabalhamos (processo)
   -------------------------------------------------------------------------- */
.step {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(2.5rem, 4vw, 3rem);
  border-top: 2px solid var(--pm-line);
  transition: border-color var(--dur) var(--ease);
}

.step:hover { border-top-color: var(--pm-accent); }

.step__num {
  position: absolute;
  top: 1rem;
  left: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pm-accent);
}

.step h3 { margin-bottom: var(--space-3); }
.step p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   9. Faixa de números
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1px;
  background: var(--pm-line);
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--pm-black);
  text-align: center;
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--pm-white);
  margin-bottom: var(--space-3);
}

/* Placeholder de número: fica óbvio que falta preencher */
.stat__value .ph {
  font-size: 0.8em;
  white-space: nowrap;
}

.stat__label {
  font-size: var(--fs-sm);
  color: var(--pm-gray);
}

.stats-note {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--pm-gray-dim);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Bloco de chamada da Pi Filmes
   -------------------------------------------------------------------------- */
.pifilmes-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 100% at 85% 50%, var(--pm-brand-40), transparent 70%),
    var(--pm-black-2);
}

@media (min-width: 52rem) {
  .pifilmes-cta { grid-template-columns: 1.25fr 0.75fr; }
}

.pifilmes-cta h2 { margin-bottom: var(--space-4); }

/* Único ponto do site da Pi Mídias onde o dourado da Pi Filmes aparece. */
.kicker--pf { color: var(--pm-pf-accent); }
.kicker--pf::before { background: var(--pm-pf-accent); }

.btn--pf {
  background: var(--pm-pf-accent);
  color: var(--pm-on-pf);
}

.btn--pf:hover { background: var(--pm-pf-hover); }

.pifilmes-cta__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--space-5) 0 var(--space-6);
}

.pifilmes-cta__list li {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--pm-gray);
}

.pifilmes-cta__anchor {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--pm-gray);
  max-width: 32rem;
}

.pifilmes-cta__visual {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  align-content: center;
}

/* Moldura do showreel — 16:9, o poster segura enquanto o vídeo não entra */
.showreel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--pm-line);
  border-radius: var(--radius);
  background: var(--pm-frame-bg);
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.5);
}

.showreel-frame__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Filete dourado discreto na moldura */
.showreel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--pm-pf-line);
  border-radius: var(--radius);
  pointer-events: none;
}

.pifilmes-cta__logo {
  width: min(11rem, 60%);
  height: auto;
  opacity: 0.95;
}

/* CTA de fechamento de seção */
.section__cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. Depoimentos
   -------------------------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--pm-card);
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-lg);
}

.quote__mark {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0.8;
  color: var(--pm-accent);
  margin-bottom: var(--space-4);
}

.quote blockquote {
  color: var(--pm-gray);
  margin-bottom: var(--space-5);
}

.quote figcaption {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--pm-line);
  font-size: var(--fs-sm);
}

.quote figcaption strong {
  display: block;
  color: var(--pm-white);
  font-family: var(--font-display);
}

.quote figcaption span { color: var(--pm-gray-dim); }

/* --------------------------------------------------------------------------
   12. FAQ (accordion)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--pm-line); }

.faq__item { border-bottom: 1px solid var(--pm-line); }

.faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 1.35rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--pm-white);
  transition: color var(--dur) var(--ease);
}

.faq__trigger:hover { color: var(--pm-accent); }

.faq__icon {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.3rem;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--pm-accent);
  transform: translateY(-50%);
  transition: transform var(--dur) var(--ease);
}

.faq__icon::after { transform: translateY(-50%) rotate(90deg); }

.faq__trigger[aria-expanded="true"] .faq__icon::after {
  transform: translateY(-50%) rotate(0deg);
}

/* Fechado por altura 0 — o JS controla a altura real para animar */
.faq__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur) var(--ease);
}

.faq__panel[hidden] {
  display: block; /* mantém animável; o estado real é height + inert */
  height: 0;
}

.faq__panel-inner {
  padding-bottom: 1.5rem;
  max-width: 52rem;
  color: var(--pm-gray);
}

.faq__panel-inner p + p { margin-top: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .faq__panel { transition: none; }
}

/* --------------------------------------------------------------------------
   13. Contato + formulário
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 56rem) {
  .contact { grid-template-columns: 0.85fr 1.15fr; }
}

.contact__info h2 { margin-bottom: var(--space-4); }

.contact__channels {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.contact__channel {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--pm-line);
  border-radius: var(--radius);
  background: var(--pm-black-2);
}

.contact__channel svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  color: var(--pm-accent);
}

.contact__channel dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-gray-dim);
  margin-bottom: 0.15rem;
}

.contact__channel dd {
  margin: 0;
  color: var(--pm-white);
  font-size: var(--fs-sm);
}

.contact__channel dd a:hover { color: var(--pm-accent); }

/* Formulário */
.form {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--pm-black-2);
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-lg);
}

.form__row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.field { margin-bottom: var(--space-4); }

.field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--pm-white);
}

.field .req { color: var(--pm-accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--pm-black);
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-sm);
  color: var(--pm-white);
  font-size: var(--fs-base);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--pm-placeholder); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px var(--pm-accent-ring);
}

/* Mantém o anel de foco de teclado também nos campos */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--pm-accent);
  outline-offset: 2px;
}

.field textarea { resize: vertical; min-height: 7.5rem; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A3A3A3' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
  padding-right: 2.5rem;
}

.field select option { background: var(--pm-black); color: var(--pm-white); }

/* Estado de erro */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--pm-danger);
  box-shadow: 0 0 0 3px var(--pm-danger-ring);
}

.field__error {
  display: none;
  margin-top: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--pm-danger-text);
}

.field.has-error .field__error { display: block; }

/* Honeypot antispam — escondido de gente, visível para robô */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--pm-gray);
}

.form__consent input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
  accent-color: var(--pm-accent);
}

/* Mensagem de retorno do formulário */
.form__status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  border: 1px dashed var(--pm-accent-line);
  background: var(--pm-accent-soft);
  color: var(--pm-white);
}

.form__status[hidden] { display: none; }
.form__status.is-error {
  border-color: var(--pm-danger-line);
  background: var(--pm-danger-soft);
}

.form__note {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--pm-gray-dim);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: var(--section-y);
  padding-bottom: var(--space-6);
  background: var(--pm-black-2);
  border-top: 1px solid var(--pm-line);
}

.footer__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: var(--space-7);
}

.footer__brand { max-width: 22rem; }
.footer__brand .brand { margin-bottom: var(--space-4); }
.footer__brand p { font-size: var(--fs-sm); }

.footer__cnpj {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--pm-gray-dim);
}

/* Título de coluna do rodapé: é h3 para não pular nível depois do último
   h2 da página, mas visualmente é um rótulo pequeno. */
.footer__col h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pm-gray-dim);
  font-weight: 600;
}

.footer__col li + li { margin-top: 0.65rem; }

.footer__col a {
  font-size: var(--fs-sm);
  color: var(--pm-gray);
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover { color: var(--pm-accent); }

.footer__pifilmes {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pm-accent) !important;
  font-weight: 600;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--pm-line);
  font-size: var(--fs-xs);
  color: var(--pm-gray-dim);
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--pm-line);
  border-radius: var(--radius-sm);
  color: var(--pm-gray);
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.footer__social a:hover {
  color: var(--pm-accent);
  border-color: var(--pm-accent);
}

.footer__social svg { width: 1.125rem; height: 1.125rem; }

/* --------------------------------------------------------------------------
   15. Botão de WhatsApp — único ponto de contato do site

   Formulários e demais CTAs saíram a pedido do cliente. Este botão é o
   caminho inteiro de conversão, então precisa ser impossível de não ver:
   redondo, fixo, com um anel pulsando por trás. O pulso é um pseudo-elemento
   separado, então a animação não mexe no botão nem no layout — só em
   transform e opacity de uma camada própria.
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--pm-whats);
  color: var(--pm-on-whats);
  box-shadow: 0 12px 34px rgba(var(--shadow-rgb), 0.5);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* Anel que pulsa. Fica atrás do botão e não intercepta clique. */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--pm-whats);
  opacity: 0.55;
  animation: whats-pulse 2.4s var(--ease) infinite;
  pointer-events: none;
}

@keyframes whats-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

.whatsapp-float:hover {
  transform: scale(1.06);
  background: var(--pm-whats-hover);
}

.whatsapp-float svg { width: 1.75rem; height: 1.75rem; }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::before { animation: none; opacity: 0; }
}

@media (max-width: 30rem) {
  .whatsapp-float { width: 3.375rem; height: 3.375rem; }
  .whatsapp-float svg { width: 1.5rem; height: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Pilares — as três frentes de trabalho

   Sem JS, os três painéis ficam empilhados e legíveis (o [hidden] só passa a
   valer quando o pilares.js marca a raiz como interativa). Com JS, vira um
   painel: a lista grande comanda à esquerda, o detalhe troca à direita.
   -------------------------------------------------------------------------- */
.pilares {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .pilares {
    grid-template-columns: minmax(14rem, 0.8fr) 1.2fr;
    align-items: start;
  }
}

/* Enquanto o JS não assume, nada fica escondido */
.pilares:not(.is-interativo) [role="tabpanel"][hidden] { display: block; }

.pilares__lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--pm-line);
}

.pilar {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: 100%;
  padding: clamp(0.85rem, 2vw, 1.35rem) 0;
  border: 0;
  border-bottom: 1px solid var(--pm-line);
  background: none;
  color: var(--pm-gray-dim);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.pilar__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--pm-placeholder);
  transition: color var(--dur) var(--ease);
}

.pilar__nome {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: lowercase;
}

.pilar:hover { color: var(--pm-white); }

.pilar[aria-selected="true"] { color: var(--pm-white); }
.pilar[aria-selected="true"] .pilar__num { color: var(--pm-accent); }

.pilar:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.pilares__painel + .pilares__painel { margin-top: var(--space-6); }
.pilares.is-interativo .pilares__painel + .pilares__painel { margin-top: 0; }

.painel__pitch {
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--pm-white);
  margin-bottom: var(--space-5);
}

.painel__lista { display: grid; gap: 0.9rem; }

.painel__lista li {
  padding-left: 1.35rem;
  position: relative;
  color: var(--pm-gray);
  line-height: 1.55;
}

.painel__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 1px;
  background: var(--pm-accent);
}

.painel__lista strong {
  color: var(--pm-white);
  font-weight: 500;
}

/* Seção que segue logo abaixo de outra do mesmo fundo pede menos respiro
   em cima, senão o vazio entre elas vira buraco. */
.section--tight { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   Abertura — cortina do primeiro carregamento

   Sem JS ela nunca aparece (o seletor exige .js no <html>), então nenhuma
   visita fica com a tela coberta se o script falhar. O JS só acrescenta a
   classe que a remove; se ele não rodar, o timeout do CSS a apaga sozinho.
   -------------------------------------------------------------------------- */
.abertura { display: none; }

.js .abertura {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--pm-black);
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}

.js .abertura.is-fora {
  opacity: 0;
  visibility: hidden;
}

.abertura__marca,
.abertura__num {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--pm-white);
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  line-height: 1;
}

.abertura__num {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--pm-accent);
}

/* Barra fina que atravessa a tela enquanto a cortina está de pé */
.js .abertura::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--pm-accent);
  animation: abertura-barra 2.2s var(--ease) forwards;
}

@keyframes abertura-barra {
  to { transform: scaleX(1); }
}

/* Movimento reduzido: nada de cortina, a página começa pronta */
@media (prefers-reduced-motion: reduce) {
  .js .abertura { display: none; }
}

/* ==========================================================================
   MOVIMENTO — o que dá o ar tecnológico à página

   Três recursos, nesta ordem de importância:
     1. a headline entra palavra por palavra, não como bloco;
     2. uma barra de progresso de leitura no topo;
     3. o fundo do hero tem uma grade que se move devagar.

   Tudo em transform e opacity, que o navegador anima na GPU sem recalcular
   layout. Nada aqui roda com prefers-reduced-motion ligado.
   ========================================================================== */

/* --- 1. Headline palavra por palavra ------------------------------------- */
.js .palavra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.65em) rotate(2deg);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.js .is-escrito .palavra {
  opacity: 1;
  transform: none;
}

/* --- 2. Barra de leitura ------------------------------------------------- */
.leitura {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--pm-accent);
  pointer-events: none;
}

/* --- 3. Grade do hero, em deriva lenta ----------------------------------- */
.hero__malha {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, var(--pm-hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pm-hairline) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 25% 60%, var(--mask-solid) 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 25% 60%, var(--mask-solid) 10%, transparent 75%);
  animation: malha-deriva 40s linear infinite;
}

@keyframes malha-deriva {
  to { transform: translate(68px, 68px); }
}

/* --- Detalhes que respondem ao ponteiro ---------------------------------- */
.filme__abrir .filme__moldura {
  transition: transform var(--dur) var(--ease);
}

.filme__abrir:hover .filme__moldura {
  transform: translateY(-4px) scale(1.012);
}

.pilar {
  position: relative;
  overflow: hidden;
}

/* Filete que corre sob o pilar ativo */
.pilar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--pm-accent);
  transition: transform 0.45s var(--ease);
}

.pilar[aria-selected="true"]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js .palavra { opacity: 1; transform: none; transition: none; }
  .leitura { display: none; }
  .hero__malha { animation: none; }
  .filme__abrir:hover .filme__moldura { transform: none; }
  .pilar::after { transition: none; }
}

/* --------------------------------------------------------------------------
   A história — texto do fundador e as duas fotos

   As fotos ficam desencontradas de propósito: uma desce, a outra sobe e
   sobrepõe a primeira. É um arranjo de álbum, não de catálogo, que é o
   registro certo para uma história pessoal.
   -------------------------------------------------------------------------- */
.historia {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .historia {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }
}

.historia__texto > p + p { margin-top: 1.15em; }

.historia__texto p {
  color: var(--pm-gray);
  line-height: 1.65;
  max-width: 46ch;
}

.historia__texto .manifesto__lead {
  color: var(--pm-white);
  max-width: 26ch;
}

.historia__assinatura {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: var(--space-4);
  border-top: 1px solid var(--pm-line);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--pm-white);
}

.historia__assinatura span {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-accent);
}

.historia__fotos {
  position: relative;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: start;
}

.historia__foto {
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  background: var(--pm-card);
}

.historia__foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* O desencontro: a maior desce um pouco, a menor sobe e fica por cima */
.historia__foto--1 { margin-top: clamp(1.5rem, 4vw, 3rem); }

.historia__foto--2 { align-self: end; }

@media (min-width: 56rem) {
  .historia__foto--1 { margin-top: clamp(2rem, 5vw, 4rem); }
  .historia__foto--2 { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
}

/* Sem foto no lugar, a coluna some e o texto ocupa a largura toda */
.historia__fotos:empty,
.historia__fotos[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Assinatura PiMKT

   "Pi" carrega o peso — é o nome que dá origem à empresa. "MKT" vem leve e
   na cor de acento: é o ofício, não o nome. O ponto acima do i é a única
   liberdade gráfica, um quadrado no lugar do círculo, que amarra a marca ao
   resto da página sem precisar de símbolo.
   -------------------------------------------------------------------------- */
.marca {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.marca__pi {
  position: relative;
  font-weight: 700;
  color: var(--pm-white);
}

/* Ponto do "i" refeito em quadrado, na cor de acento */
.marca__pi::after {
  content: "";
  position: absolute;
  top: 0.06em;
  right: 0.015em;
  width: 0.15em;
  height: 0.15em;
  background: var(--pm-accent);
  border-radius: 1px;
}

.marca__mkt {
  margin-left: 0.12em;
  font-weight: 300;
  color: var(--pm-accent);
}

/* Sobre fundo claro, o "Pi" inverte junto com a seção */
.section--invert .marca__pi { color: var(--pm-ink); }

@media (max-width: 30rem) {
  .marca { font-size: 1.3125rem; }
}

/* --------------------------------------------------------------------------
   Curvas na Pi Mídias — cores das ondas e das formas
   -------------------------------------------------------------------------- */

/* A onda herda a cor do bloco que vem DEPOIS dela, e é desenhada sobre o
   bloco anterior. Por isso o color é definido em cada variação. */
.onda--para-claro { color: var(--pm-white); background: var(--pm-black); }
.onda--para-escuro { color: var(--pm-black); background: var(--pm-white); }
.onda--para-superficie { color: var(--pm-black-2); background: var(--pm-black); }
.onda--de-superficie { color: var(--pm-black); background: var(--pm-black-2); }

.forma--1 { background: radial-gradient(circle at 35% 35%, var(--pm-brand-40), transparent 68%); }
.forma--2 { background: radial-gradient(circle at 60% 40%, var(--pm-accent-glow), transparent 70%); }
.forma--3 { background: radial-gradient(circle at 50% 50%, var(--pm-brand-15), transparent 72%); }

/* Cantos: o que era caixa vira forma -------------------------------------- */
.filme__moldura { border-radius: var(--radius-lg); }
.historia__foto { border-radius: var(--radius-xl); }
.pifilmes-cta { border-radius: var(--radius-xl); }
.player__video { border-radius: var(--radius-lg); }

/* A foto maior da história ganha canto assimétrico: some com a cara de
   moldura de catálogo e assume a de recorte de álbum. */
.historia__foto--1 { border-radius: var(--radius-lg) var(--radius-lg) clamp(1.75rem, 7vw, 6rem) var(--radius-lg); }
.historia__foto--2 { border-radius: var(--radius-lg) clamp(1.5rem, 6vw, 5rem) var(--radius-lg) var(--radius-lg); }

/* O hero perde a grade quadriculada e ganha arcos concêntricos ------------ */
.hero__malha {
  background-image:
    repeating-radial-gradient(
      circle at 18% 76%,
      transparent 0,
      transparent 78px,
      var(--pm-hairline) 78px,
      var(--pm-hairline) 79px
    );
  background-size: auto;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 20% 70%, var(--mask-solid) 5%, transparent 72%);
  mask-image: radial-gradient(ellipse 85% 75% at 20% 70%, var(--mask-solid) 5%, transparent 72%);
  animation: arcos-respirar 26s ease-in-out infinite alternate;
}

@keyframes arcos-respirar {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(1.14); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__malha { animation: none; }
}

/* O filete reto sob os pilares vira uma curva suave ----------------------- */
.pilar {
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pilar[aria-selected="true"] { background: var(--pm-card); }

.pilares__lista {
  border-top: 0;
  gap: 0.35rem;
}

.pilar::after {
  bottom: 0;
  height: 2px;
  border-radius: 2px;
}

/* A faixa que corre no pé do hero deixa de ser um retângulo de bordas retas */
.pi-strip {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--pm-card);
  padding-block: 0.9rem;
}

/* --------------------------------------------------------------------------
   Destaque do Drone Tour

   Duas colunas: texto de um lado, vídeo do outro. O vídeo é o argumento —
   por isso ganha metade da tela, e não um card na grade.
   -------------------------------------------------------------------------- */
.destaque {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .destaque { grid-template-columns: 1fr 1.15fr; }
}

.destaque__lead {
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--pm-white);
  margin-bottom: var(--space-4);
}

.destaque__texto > p { color: var(--pm-gray); line-height: 1.65; }
.destaque__texto > p + p { margin-top: 1.15em; }
.destaque__texto h2 + .destaque__lead { margin-top: var(--space-4); }

.destaque__lista {
  display: grid;
  gap: 0.7rem;
  margin: var(--space-5) 0;
}

.destaque__lista li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--pm-gray);
  line-height: 1.5;
}

.destaque__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pm-accent);
}

.destaque__moldura {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--pm-frame-bg);
  aspect-ratio: 16 / 9;
}

.destaque__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback: sem JS ou sem o arquivo, o poster segura a moldura */
.destaque__moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(var(--pm-black-rgb), 0.45), transparent 55%);
}

/* Botão de som: o vídeo entra mudo (regra de autoplay dos navegadores) e
   quem quiser ouvir o desenho sonoro liga aqui. Sem isso, o argumento do
   "efeitos sonoros" fica sem prova. */
.destaque__som {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(var(--pm-white-rgb), 0.22);
  border-radius: var(--radius-pill);
  background: rgba(var(--pm-black-rgb), 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--pm-white);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.destaque__som:hover {
  background: rgba(var(--pm-black-rgb), 0.75);
  border-color: var(--pm-accent);
}

.destaque__som svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Um ícone por estado: mudo mostra o cortado, com som mostra as ondas */
.destaque__som .destaque__som-on { display: none; }
.destaque__som[aria-pressed="true"] .destaque__som-on { display: block; }
.destaque__som[aria-pressed="true"] .destaque__som-off { display: none; }

/* Bloco de destaque com a coluna de texto à direita (seção de IA) */
@media (min-width: 56rem) {
  .destaque--inverso { grid-template-columns: 1.15fr 1fr; }
}

/* Mosaico: menos colunas que a grade de trabalho, porque acompanha um texto
   e não é o assunto principal da seção */
.filmes--mosaico {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0;
}

.destaque__mosaico[hidden] { display: none; }

/* Sem mosaico, o texto ocupa a largura toda em vez de deixar meia tela vazia */
.destaque.is-sem-mosaico { grid-template-columns: 1fr; }
.destaque.is-sem-mosaico .destaque__texto { max-width: 62ch; }

/* --------------------------------------------------------------------------
   Menu flutuante — o header deixa de ser uma barra reta colada no topo

   Vira uma cápsula que solta da borda quando a página rola. Enquanto está no
   topo, fica transparente e sem contorno: o hero respira inteiro. A partir do
   primeiro scroll, encolhe, arredonda e ganha fundo — é o movimento que
   sinaliza que a página saiu do lugar.
   -------------------------------------------------------------------------- */
@media (min-width: 62.0625rem) {
  .site-header {
    inset: 0 0 auto 0;
    padding-inline: clamp(1rem, 3vw, 2rem);
    border-bottom: 0;
    transition: padding-block var(--dur-slow) var(--ease);
  }

  .site-header.is-scrolled { padding-block: 0.65rem; }

  /* A cápsula é o ::before: assim o conteúdo do header não precisa de wrapper
     extra e o raio anima sem mexer no layout dos filhos. */
  .site-header::before {
    inset: 0.5rem clamp(1rem, 3vw, 2rem);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
      background-color var(--dur-slow) var(--ease),
      border-color var(--dur-slow) var(--ease),
      inset var(--dur-slow) var(--ease);
  }

  .site-header.is-scrolled::before {
    inset: 0.5rem clamp(1rem, 3vw, 2rem);
    background: rgba(var(--pm-black-rgb), 0.62);
    border-color: rgba(var(--pm-white-rgb), 0.08);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }

  .site-header.is-scrolled { border-bottom-color: transparent; }

  .site-header__inner {
    padding-inline: clamp(1rem, 2.5vw, 1.75rem);
    transition: min-height var(--dur-slow) var(--ease);
  }

  .site-header.is-scrolled .site-header__inner { min-height: 3.5rem; }

  /* Item de menu com alvo arredondado no hover, em vez de sublinhado reto */
  .nav__link {
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-pill);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .nav__link:hover {
    background: rgba(var(--pm-white-rgb), 0.07);
    color: var(--pm-white);
  }
}

/* No mobile a cápsula vira um cartão arredondado, não uma barra de ponta a ponta */
@media (max-width: 62rem) {
  .site-header { padding-inline: 0.75rem; border-bottom: 0; }

  .site-header::before {
    inset: 0.5rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .site-header.is-scrolled::before {
    border-color: rgba(var(--pm-white-rgb), 0.08);
  }

  .site-header.is-scrolled { border-bottom-color: transparent; }
  .site-header__inner { padding-inline: 0.85rem; }
}


/* --------------------------------------------------------------------------
   WhatsApp — 50% maior, com convite ao lado

   O balão só aparece no desktop: no celular ele cobriria conteúdo, e ali o
   ícone verde já é reconhecido sozinho. O convite entra no aria-label do
   link, então quem usa leitor de tela ouve a mesma frase de qualquer forma.
   -------------------------------------------------------------------------- */
.whatsapp-float {
  width: 5.625rem;
  height: 5.625rem;
}

.whatsapp-float svg { width: 2.625rem; height: 2.625rem; }

.whatsapp-float__balao {
  position: absolute;
  right: calc(100% + 0.85rem);
  top: 50%;
  transform: translateY(-50%) translateX(0.5rem);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 0.7rem 1.05rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: rgba(var(--pm-black-rgb), 0.9);
  border: 1px solid var(--pm-line);
  color: var(--pm-white);
  line-height: 1;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.whatsapp-float:hover .whatsapp-float__balao,
.whatsapp-float:focus-visible .whatsapp-float__balao {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 48rem) {
  .whatsapp-float { width: 4.5rem; height: 4.5rem; }
  .whatsapp-float svg { width: 2.125rem; height: 2.125rem; }
  .whatsapp-float__balao { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float__balao { transition: none; }
}