/* ============================================================
   DESIGN SYSTEM — AGÊNCIA CRIATIVA (Claude Design source)
   colors_and_type.css — copied verbatim from the Claude Design
   project so the site tracks the same tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand Core */
  --color-red:        #d2232a;
  --color-red-dark:   #a02b22;
  --color-black:      #000000;

  /* Extended Palette */
  --color-orange-light: #f9a868;
  --color-orange:       #d67548;
  --color-purple:       #4c4461;
  --color-navy:         #263150;
  --color-rose:         #c96e7c;
  --color-teal-dark:    #1b3f52;
  --color-teal:         #27666b;
  --color-blue:         #6e82b7;

  /* Neutrals — Warm */
  --color-white:      #ffffff;
  --color-paper:      #f5f0eb;
  --color-paper-dark: #ede5db;
  --color-border:     #e0d6cc;
  --color-gray-warm:  #6a5f5b;
  --color-gray-light: #c0b8b0;
  --color-gray-mid:   #7a756f;
  --color-gray:       #555048;
  --color-ink:        #1a1712;

  /* Semantic */
  --color-bg:         var(--color-paper);
  --color-bg-inverse: var(--color-black);
  --color-fg:         var(--color-ink);
  --color-fg-muted:   var(--color-gray);
  --color-fg-subtle:  var(--color-gray-mid);
  --color-accent:     var(--color-red);
  --color-accent-hover: var(--color-red-dark);
  --color-surface:    var(--color-white);
  --color-surface-raised: var(--color-paper);
  --color-divider:    var(--color-border);

  /* Font Families */
  --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-sans:    'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-hero:    'eight', 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;

  /* Font Sizes — Major Third scale (1.250) */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;
  --text-6xl:  8rem;

  /* Font Weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* Line Heights */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* Spacing — 4px base */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* Border Radius */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:  0 2px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.18);
  --shadow-red: 0 4px 24px rgba(210,35,42,0.25);

  /* Borders */
  --border-thin:   1px solid var(--color-divider);
  --border-mid:    1px solid var(--color-gray-light);
  --border-strong: 1px solid var(--color-ink);
  --border-accent: 2px solid var(--color-red);

  /* Transitions */
  --ease-premium: cubic-bezier(0.25, 0, 0, 1);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:    cubic-bezier(0.83, 0, 0.17, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  --transition-base: var(--duration-normal) var(--ease-premium);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Display — grandes títulos, sans-serif geométrico */
.t-display-xl { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--weight-light); line-height: 1.0; letter-spacing: -0.04em; }
.t-display-lg { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-light); line-height: 1.02; letter-spacing: -0.035em; }
.t-display { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-medium); line-height: 1.05; letter-spacing: -0.03em; }

/* Headings — sans-serif, estrutural */
h1, .t-h1 { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
h2, .t-h2 { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
h3, .t-h3 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
h4, .t-h4 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }

p, .t-body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); }
.t-body-sm { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); }
.t-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.t-quote { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: -0.02em; }
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); }

html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: #ffffff; color: var(--color-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--color-red); text-decoration: none; }
a:hover { color: var(--color-red-dark); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--color-red); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ══════════════ NAV (from Nav.dc.html) ══════════════ */
.zn-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1002;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px; background: rgba(26,23,18,0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-sans); box-sizing: border-box;
}
.zn-logo { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; line-height: 1; }
.zn-logo:hover { color: #fff; }
.zn-logo-img { width: 130px; height: 42px; display: block; }
.zn-links { display: flex; align-items: center; gap: 40px; }
.zn-link {
  color: #f5f0eb; text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  font-family: var(--font-sans); border-bottom: 2px solid transparent; padding-bottom: 4px;
  transition: color 250ms var(--ease-premium), border-color 250ms var(--ease-premium);
}
.zn-link:hover { color: var(--color-red); }
.zn-link.is-active { color: var(--color-red); font-weight: 700; border-bottom-color: var(--color-red); }
.zn-burger {
  display: none; position: relative; width: 40px; height: 25px;
  background: none; border: none; cursor: pointer; padding: 8px; box-sizing: border-box; z-index: 1003;
}
.zn-burger span {
  position: absolute; left: 8px; width: 24px; height: 2px; background: #fff;
  transition: transform 380ms var(--ease-premium);
}
.zn-burger span:nth-child(1) { top: 8px; transform: translateY(0) rotate(0deg); }
.zn-burger span:nth-child(2) { top: 15px; transform: translateY(0) rotate(0deg); }
.zn-burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.zn-burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.zn-mobile-menu {
  position: fixed; inset: 0; z-index: 1001; background: #000;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 50px; padding: 40px 25px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.45s var(--ease-premium), visibility 0s linear 0.45s;
}
.zn-mobile-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.45s var(--ease-premium), visibility 0s linear 0s;
}
.zn-mobile-link {
  color: #fff; text-decoration: none; font-size: 30px; font-weight: 700; line-height: 1;
  font-family: var(--font-sans); text-transform: capitalize;
  opacity: 0; transform: translateY(46px) rotate(4deg);
  transition: opacity 0.5s var(--ease-out), transform 0.65s var(--ease-bounce), color 0.3s var(--ease-premium);
}
.zn-mobile-menu.is-open .zn-mobile-link { opacity: 1; transform: translateY(0) rotate(0deg); }
.zn-mobile-menu.is-open .zn-mobile-link:nth-child(1) { transition-delay: 90ms; }
.zn-mobile-menu.is-open .zn-mobile-link:nth-child(2) { transition-delay: 150ms; }
.zn-mobile-menu.is-open .zn-mobile-link:nth-child(3) { transition-delay: 210ms; }
.zn-mobile-menu.is-open .zn-mobile-link:nth-child(4) { transition-delay: 270ms; }
.zn-mobile-menu.is-open .zn-mobile-link:nth-child(5) { transition-delay: 330ms; }
.zn-mobile-link:hover { color: var(--color-red); transform: translateX(10px); }
.zn-mobile-link.is-active { color: var(--color-red); }
@media (prefers-reduced-motion: reduce) {
  .zn-mobile-link { transform: none !important; transition: opacity 0.2s !important; }
}
@media (max-width: 860px) {
  .zn-links { display: none !important; }
  .zn-burger { display: flex !important; }
}

/* ══════════════ SHARED HOME ELEMENTS ══════════════ */
.zh-link {
  display: inline-flex; align-items: center; gap: 12px; color: var(--color-ink); text-decoration: none;
  font-size: 15px; font-weight: 600; border-bottom: 2px solid var(--color-red); padding-bottom: 6px;
}
.zh-link:hover { color: var(--color-ink); }
.zh-link.on-dark { color: #f5f0eb; }
.zh-link.on-dark:hover { color: #f5f0eb; }

/* Seções da home: padding/layout responsivos seguindo os frames
   home (#1:22, mobile 390) e home-desktop (#18:4, 1440), breakpoint 860px
   igual ao do nav. */
.zs-section { padding: 65px 25px; }
.zs-row {
  display: flex; flex-direction: column; gap: 32px; align-items: stretch;
}
.zs-row.align-end { align-items: stretch; }
.zs-stats {
  display: flex; flex-direction: column; gap: 56px;
  padding: 65px 25px; background: #000;
}
.zs-metric-value { font-size: clamp(48px,10vw,72px); font-weight: 200; letter-spacing: 0.02em; line-height: 1; display: inline-flex; }
.zs-metric-char {
  display: inline-block; opacity: 0; transform: translateY(50%) scale(0.6); filter: blur(10px);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-bounce), filter 0.4s var(--ease-premium);
}
.zs-metric-char-in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.zs-metric-char-settle { animation: zs-metric-punch 0.4s var(--ease-bounce); }
@keyframes zs-metric-punch {
  0% { transform: scale(1.4); color: var(--color-red); }
  100% { transform: scale(1); }
}
.zs-metric-label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #a89f94; margin-top: 14px; }
.zs-card-img { width: 100%; aspect-ratio: 8 / 5; border-radius: 15px; background: #c4c4c4 center/cover no-repeat; }
.zs-card-cat { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-red); margin: 14px 0 6px; }
.zs-card-title { font-size: 19px; font-weight: 600; color: var(--color-ink); }
.zs-card-desc { font-size: 14px; color: var(--color-gray); margin-top: 8px; line-height: 1.6; }
.zs-cards { display: flex; flex-direction: column; gap: 24px; }
.zs-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.zs-tag {
  background: #000; color: #f9a868; font-size: 13px; text-transform: uppercase;
  padding: 10px 16px; font-family: var(--font-mono);
}
@media (min-width: 860px) {
  .zs-section { padding: 120px 80px; }
  .zs-row { flex-direction: row; gap: 80px; align-items: flex-start; }
  .zs-row.align-end { align-items: flex-end; }
  .zs-stats { flex-direction: row; justify-content: space-between; padding: 80px; }
  .zs-cards { flex-direction: row; gap: 60px; }
  .zs-cards > a { flex: 1; }
}

/* ══════════════ HERO: VETORES ORGÂNICOS REVELAM O VÍDEO ══════════════
   (home-1/home-2/home-desktop-1/home-desktop-2 no Figma)
   Vídeo fixo em tela cheia (100%) + camada preta por cima com um recorte
   (knockout) em forma de 4 blobs orgânicos, cada um ancorado a um canto da
   tela, que crescem a partir desse canto conforme o scroll até cobrirem
   100% da área — nesse ponto a camada preta está inteiramente "furada" e o
   vídeo aparece por completo. Texto sempre em branco (negativo), visível
   desde o início, por cima de tudo. */
.hero-video { position: relative; height: 200vh; background: #000; }
.hero-sticky {
  position: sticky; top: 0; height: 100svh; min-height: 640px; width: 100%;
  overflow: hidden; background: #000; isolation: isolate;
}
/* Grupo isolado (vídeo + knockout + camada escura): isolation:isolate faz o
   navegador "achatar" esse grupo inteiro num único resultado antes de
   qualquer blend-mode fora dele enxergar essa área — garantindo que o texto
   (mix-blend-mode:difference, fora desse grupo) sempre veja a cor DEPOIS da
   camada escura, nunca antes dela. */
.hero-media { position: absolute; inset: 0; isolation: isolate; }
.hero-video-layer { position: absolute; inset: 0; background: #111 center/cover no-repeat; }
.hero-video-layer img,
.hero-video-layer video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.2) contrast(1.05);
}
.hero-knockout {
  position: absolute; inset: 0; background: #050403;
  -webkit-mask: url(#heroBlobMask); mask: url(#heroBlobMask);
}
.hero-mask-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
#heroBlobGroup { will-change: transform; }

/* Camada entre o vídeo/knockout e o texto, para dar mais contraste/leitura. */
.hero-scrim { position: absolute; inset: 0; background: #1a1712; opacity: 0.6; }

/* Texto sempre com mix-blend-mode:difference (referência: dexa.ag) — onde o
   vídeo aparece por baixo (dentro dos blobs), a cor vira o "negativo" da
   cena a cada pixel, garantindo leitura em qualquer trecho do vídeo; onde só
   há a camada preta, o texto fica branco normal. */
/* Sem z-index de propósito: um z-index != auto criaria um novo contexto de
   empilhamento aqui, "prendendo" o mix-blend-mode dos filhos dentro dele e
   impedindo que enxerguem o vídeo/knockout (que ficam num nível acima na
   pilha). Sem z-index, ele ainda pinta por cima por já vir depois no DOM. */
.hero-blob-text { position: absolute; left: 6.5vw; right: 6.5vw; top: 14%; }
.hero-blob-heading {
  font-family: var(--font-hero); font-weight: 900; color: #fff; mix-blend-mode: difference;
  font-size: clamp(65px, calc(52px + 3.333vw), 100px);
  line-height: 1.05; text-transform: uppercase; margin: 0 0 32px; max-width: 900px;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
/* Sempre branco (sem mix-blend-mode) — diferente do título, esse texto não
   deve virar "negativo" sobre o vídeo, para garantir leitura constante. */
.hero-blob-paragraph {
  color: #ffffff;
  font-size: clamp(16px,2vw,20px); font-weight: 300; line-height: 1.6;
  max-width: 560px; margin: 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out) 0.15s, transform 0.9s var(--ease-out) 0.15s;
}
.hero-blob-text.is-in .hero-blob-heading,
.hero-blob-text.is-in .hero-blob-paragraph { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hero-blob-heading, .hero-blob-paragraph { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (min-width: 860px) {
  .hero-blob-text { left: 80px; right: 80px; top: 20%; }
}

.hero-scroll-hint {
  position: absolute; left: 6vw; bottom: 48px; z-index: 2;
  color: #f5f0eb; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  transition: opacity 0.3s var(--ease-premium);
}
/* O pulso só roda antes do usuário começar a rolar (classe .is-idle, controlada
   via JS); assim que o scroll inicia, a opacidade passa a ser 100% controlada
   pelo JS (que precisa vencer a cascata sem um @keyframes competindo). */
.hero-scroll-hint.is-idle { animation: zhint-pulse 2.2s var(--ease-premium) infinite; }
.hero-scroll-hint.is-idle .hero-scroll-hint-bar { animation: zhint-bar 2.2s var(--ease-premium) infinite; }
.hero-scroll-hint-bar { width: 28px; height: 1px; background: #f5f0eb; display: inline-block; }
@keyframes zhint-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes zhint-bar { 0%, 100% { transform: scaleX(1); transform-origin: left; } 50% { transform: scaleX(1.6); transform-origin: left; } }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint.is-idle, .hero-scroll-hint.is-idle .hero-scroll-hint-bar { animation: none; }
}
@media (min-width: 860px) {
  .hero-scroll-hint { left: 80px; font-size: 15px; }
}

/* ══════════════ FOOTER (from Footer.dc.html) ══════════════ */
.zf-footer { background: #000; color: #f5f0eb; font-family: var(--font-sans); box-sizing: border-box; padding: 120px 6vw 40px; position: relative; overflow: hidden; }
.zf-topline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(210,35,42,0.5), transparent); }
.zf-statement { max-width: 1100px; }
.zf-statement-text { font-size: clamp(36px,6vw,88px); font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 48px; }
.zf-statement-text > span { color: var(--color-red); }

/* "Alta Direção Criativa" no CTA de rodapé (todas as páginas, exceto
   contato): o texto nasce branco e ganha cor vermelha da esquerda para a
   direita, como um preenchimento. Um único nó de texto (sem duplicar o
   span, o que causava desalinhamento entre a caixa inline do texto base e
   a caixa "blockificada" de um overlay position:absolute) com um gradiente
   de borda dura (branco|vermelho) sempre cobrindo 100% do texto — a
   posição da borda anima via custom property. Nunca fica transparente/
   invisível: pior caso sem @property é a cor trocar sem transição suave,
   nunca sumir. */
@property --zf-wipe {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.zf-statement-text .zf-adc-highlight {
  --zf-wipe: 0%;
  background-image: linear-gradient(to right, var(--color-red) 0%, var(--color-red) var(--zf-wipe), #fff var(--zf-wipe), #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  transition: --zf-wipe 1.1s var(--ease-premium);
}
.zf-adc-highlight.reveal { opacity: 1; transform: none; transition: --zf-wipe 1.1s var(--ease-premium); }
.zf-adc-highlight.in-view { --zf-wipe: 100%; }
.zf-cta { display: inline-flex; align-items: center; gap: 14px; color: #f5f0eb; text-decoration: none; font-size: 18px; font-weight: 600; border-bottom: 2px solid var(--color-red); padding-bottom: 8px; }
.zf-cta:hover { color: #f5f0eb; }
.zf-columns { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; margin-top: 110px; padding-top: 40px; border-top: 1px solid rgba(245,240,235,0.15); }
.zf-col { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.zf-col-title { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8a8177; margin-bottom: 6px; }
.zf-brand-logo { width: 80px; height: 26px; display: block; margin-bottom: 10px; }
.zf-brand-tag { font-size: 13px; color: #8a8177; line-height: 1.6; }
.zf-col a { color: #f5f0eb; text-decoration: none; font-size: 14px; }
.zf-col a:hover { color: var(--color-red); }
.zf-social-icons { display: flex; gap: 10px; }
.zf-social-icons a {
  width: 40px; height: 40px; border-radius: 999px; background: rgba(196,196,196,0.2);
  display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.25s var(--ease-premium);
}
.zf-social-icons a:hover { background: var(--color-red); }
.zf-social-icon { display: block; width: 20px; height: 20px; object-fit: contain; }
.zf-bottom { margin-top: 64px; font-size: 12px; color: #5f584f; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }

/* ══════════════ PÁGINAS INTERNAS (quem-somos, o-que-fazemos, ...) ══════════════ */
.zp-eyebrow { font-family: var(--font-sans); font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-red); margin-bottom: 20px; }
.zp-hero-heading { font-family: var(--font-hero); font-weight: 900; font-size: clamp(34px,7vw,65px); letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.08; margin: 0; }
.zp-heading { font-size: clamp(26px,3vw,40px); font-weight: 500; line-height: 1.3; margin: 0; text-transform: none; letter-spacing: normal; }
.zp-body { font-size: 18px; line-height: 1.6; color: #555048; max-width: 340px; }
.zp-body.on-dark { color: #f5f0eb; }
.zp-body p { margin: 0 0 22px; }
.zp-body p:last-child { margin-bottom: 0; }

.zp-segments { display: flex; flex-direction: column; gap: 20px; }
.zp-segment { padding-bottom: 20px; border-bottom: 1px solid #4a443d; }
.zp-segment-title { font-size: 20px; font-weight: 500; color: #fff; margin-bottom: 8px; }
.zp-segment-title.bold { font-weight: 800; }
.zp-segment-list { font-size: 15px; color: #a89f94; line-height: 1.6; }
@media (min-width: 860px) {
  /* Figma (segments-grid #19:205): cada segmento tem largura fixa igual à do
     container inteiro, então mesmo com wrap, sempre sai 1 por linha. */
  .zp-segments { gap: 0; }
  .zp-segment {
    display: flex; flex-direction: row; align-items: flex-start; gap: 80px;
    padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .zp-segments .zp-segment:last-child { border-bottom: none; }
  .zp-segment-title { flex: 0 0 354px; font-weight: 700; margin-bottom: 0; }
  .zp-segment-title.bold { font-weight: 700; }
  .zp-segment-list { flex: 1; color: rgba(255,255,255,0.7); line-height: 1.5; }
}

.zp-caps { display: flex; flex-direction: column; gap: 30px; }
.zp-multiplatform-intro .zp-body { max-width: none; }
@media (min-width: 860px) {
  .zp-multiplatform-intro {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 80px; align-items: start;
  }
  .zp-multiplatform-intro .zp-heading { line-height: 1.12; }
}
.zp-cap { padding-bottom: 30px; border-bottom: 1px solid #e0d6cc; }
.zp-cap-title { font-size: 20px; font-weight: 500; text-transform: capitalize; color: var(--color-ink); margin-bottom: 8px; }
.zp-cap-subtitle { font-size: 15px; color: #555048; margin-bottom: 8px; }
.zp-cap-tags { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-red); line-height: 1.6; }

.zp-team { display: flex; flex-direction: column; gap: 56px; }
.zp-team-photo { width: 100%; aspect-ratio: 340/446; border-radius: 4px; background: #333 center/cover no-repeat; margin-bottom: 24px; }
.zp-team-role { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-red); margin-bottom: 12px; }
.zp-team-name { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.zp-team-bio { font-size: 15px; color: #a89f94; line-height: 1.6; }
.zp-team-bio p { margin: 0 0 14px; }
@media (min-width: 860px) {
  .zp-team { flex-direction: row; gap: 80px; }
  .zp-team > * { flex: 1; }
  .zp-team-photo { aspect-ratio: auto; height: 450px; }
}

.zp-awards { display: flex; flex-direction: column; gap: 20px; }
.zp-award { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #e0d6cc; }
.zp-award-logo { width: 92px; height: 76px; border-radius: 4px; background: #eee center/contain no-repeat; flex: 0 0 auto; }
.zp-award-name { font-size: 20px; font-weight: 600; color: var(--color-ink); text-transform: capitalize; }
@media (min-width: 860px) {
  .zp-awards { flex-direction: row; flex-wrap: wrap; gap: 48px; }
  .zp-award { flex: 0 1 calc(33.333% - 32px); min-width: 0; border-bottom: none; padding-bottom: 0; }
  .zp-award-name { font-size: 15px; }
}

/* ══════════════ SERVIÇOS (o-que-fazemos) ══════════════ */
.zo-service { display: flex; flex-direction: column; gap: 24px; padding: 40px 0; border-bottom: 1px solid #e0d6cc; }
.zo-service:last-child { border-bottom: none; }
.zo-service-title-col { flex: 0 0 auto; }
.zo-service-title { font-size: clamp(24px,3vw,40px); font-weight: 500; line-height: 1.25; margin: 12px 0 0; color: var(--color-ink); text-transform: none; letter-spacing: normal; }
.zo-service-body { font-size: 18px; color: #555048; line-height: 1.6; margin: 0 0 20px; }
.zo-deliverables { background: #faf9f6; border-radius: 8px; padding: 20px; }
.zo-deliverables-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 6px; }
.zo-deliverables-text { font-size: 14px; color: #555048; line-height: 1.6; }
@media (min-width: 860px) {
  .zo-service { flex-direction: row; gap: 48px; padding: 64px 0; }
  .zo-service-title-col { width: 380px; flex: 0 0 380px; }
  .zo-service-body { margin-bottom: 24px; }
}

/* ══════════════ GRID DE ARTIGOS (inspirações, trabalhos) ══════════════ */
.zi-grid { display: flex; flex-direction: column; gap: 40px; }
.zi-grid > a.is-hidden { display: none !important; }
.zi-empty-msg { display: none; font-size: 15px; color: #8a8177; padding: 24px 0 0; }
.zi-empty-msg.is-visible { display: block; }
.zi-search-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.zi-search-input {
  border: none; border-bottom: 1px solid #c0b8b0; padding: 14px 0; color: var(--color-ink);
  font-size: 15px; font-family: var(--font-sans); background: transparent; outline: none; width: 100%;
  box-sizing: border-box; transition: border-color 0.2s var(--ease-premium);
}
.zi-search-input::placeholder { color: #a89f94; }
.zi-search-input:focus { border-color: var(--color-red); }
.zi-filter-row { display: flex; gap: 10px; }
.zi-filter-btn {
  position: relative; z-index: 40; border: 1px solid #e0d6cc; padding: 10px 14px; font-size: 13px; color: var(--color-ink);
  background: #fff; cursor: pointer; user-select: none; font-family: var(--font-sans);
  transition: border-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium);
}
.zi-filter-btn:hover, .zi-filter-btn.is-active { border-color: var(--color-red); color: var(--color-red); }
.zi-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid #e0d6cc; box-shadow: 0 16px 40px rgba(26,23,18,0.12); z-index: 30;
  display: none; flex-direction: column; padding: 6px 0;
}
.zi-dropdown.is-open { display: flex; }
.zi-dropdown-item {
  display: block; width: 100%; text-align: left; padding: 10px 16px; font-size: 13px; color: var(--color-ink);
  background: none; border: none; cursor: pointer; font-family: var(--font-sans); white-space: nowrap;
}
.zi-dropdown-item:hover { background: #f5f0eb; }
.zi-dropdown-item.is-selected { color: var(--color-red); font-weight: 700; }
@media (min-width: 860px) {
  .zi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .zi-grid > a { min-width: 0; }
  .zi-search-row { flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
}
@media (min-width: 860px) and (max-width: 1099px) {
  .zi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════ CONTATO ══════════════ */
.zc-form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.zc-left-col { display: flex; flex-direction: column; }
@media (min-width: 860px) {
  .zc-left-col { flex: 0 0 400px; }
  .zc-form { max-width: 640px; gap: 32px; }
}
.zc-field { border-bottom: 1px solid #c0b8b0; padding: 14px 0; }
.zc-field input, .zc-field textarea {
  width: 100%; border: none; outline: none; font-family: var(--font-sans);
  font-size: 15px; color: var(--color-ink); background: transparent;
}
.zc-field textarea { resize: vertical; min-height: 100px; font-family: var(--font-sans); }
.zc-field input::placeholder, .zc-field textarea::placeholder { color: #a89f94; }
.zc-field select {
  width: 100%; border: none; outline: none; font-family: var(--font-sans);
  font-size: 15px; color: var(--color-ink); background: transparent; cursor: pointer;
  appearance: none; -webkit-appearance: none; padding-right: 24px;
}
.zc-field select:invalid, .zc-field select option[value=""] { color: #a89f94; }
.zc-field:has(select) { position: relative; }
.zc-field:has(select)::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid #a89f94; border-bottom: 2px solid #a89f94;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.zc-submit {
  background: rgba(210,35,42,0.5); color: #fff; border: none; padding: 20px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.05em;
  text-transform: uppercase; cursor: pointer; width: 100%;
}
.zc-channels-label { font-size: 14px; font-weight: 700; color: #888; margin-bottom: 12px; }
.zc-channel { display: block; font-size: 16px; font-weight: 600; color: #111; text-decoration: none; margin-bottom: 6px; }
.zc-channel:hover { color: var(--color-red); }
.zc-address { font-size: 15px; color: #8a8177; line-height: 1.6; margin-top: 16px; }

/* ══════════════ SCROLL REVEAL ══════════════
   Blocos de conteúdo entram com fade + subida + leve escala/rotação, numa
   curva com overshoot (--ease-bounce) para um efeito mais arrojado que um
   simples fade. Cartões dentro de grids ganham atraso escalonado via
   nth-child para um efeito cascata mais perceptível. */
.reveal {
  opacity: 0; transform: translateY(70px) scale(0.93) rotate(-0.6deg);
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-bounce);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.reveal-group > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-group > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-group > .reveal:nth-child(6) { transition-delay: 400ms; }
.reveal-group > .reveal:nth-child(7) { transition-delay: 480ms; }
.reveal-group > .reveal:nth-child(8) { transition-delay: 560ms; }
.reveal-group > .reveal:nth-child(9) { transition-delay: 640ms; }
.reveal-group > .reveal:nth-child(10) { transition-delay: 720ms; }
.reveal-group > .reveal:nth-child(n+11) { transition-delay: 780ms; }

/* Segmentos trabalhados: título e lista "emergem" de baixo para cima,
   como se surgissem da linha divisória (border-bottom) de cada segmento.
   A linha nunca se move; só o texto sobe por trás dela via overflow:hidden
   + translateY num wrapper interno (.zp-rise-inner, criado via JS). O
   .zp-segment em si nunca fica com opacity:0 — é sempre visível — e a
   rede de segurança de 2.5s garante que o texto nunca fique escondido
   para sempre caso o IntersectionObserver não dispare. */
.zp-segment.reveal { opacity: 1; }
.zp-segment-title, .zp-segment-list { overflow: hidden; }
.zp-rise-inner {
  display: block; transform: translateY(115%);
  transition: transform 0.7s var(--ease-premium);
  will-change: transform;
}
.zp-segment.in-view .zp-segment-title > .zp-rise-inner { transition-delay: 0.08s; transform: translateY(0); }
.zp-segment.in-view .zp-segment-list > .zp-rise-inner { transition-delay: 0.2s; transform: translateY(0); }
.reveal-group > .zp-segment.reveal { transition-delay: 0ms; }

/* "O que entregamos": título e corpo do card NUNCA ficam com opacity:0 —
   texto sempre legível por padrão, só desliza levemente quando entra em
   vista. Se o observer nunca disparar, o pior caso é ficar 24px deslocado,
   nunca invisível. */
.zo-service.reveal { opacity: 1; transform: none; transition: none; }
.zo-service-title-col, .zo-service > div:last-child { opacity: 1; }
.zo-service.reveal .zo-service-title-col, .zo-service.reveal > div:last-child {
  transform: translateY(28px);
  transition: transform 0.7s var(--ease-bounce);
}
.zo-service.reveal.in-view .zo-service-title-col { transition-delay: 0.05s; }
.zo-service.reveal.in-view > div:last-child { transition-delay: 0.2s; }
.zo-service.reveal.in-view .zo-service-title-col,
.zo-service.reveal.in-view > div:last-child { transform: translateY(0); }

/* "O que entregamos": o retângulo #FAF9F6 com o resumo — mesma regra:
   sempre visível, só ganha um leve movimento de entrada. */
.zo-deliverables { opacity: 1; }
.zo-deliverables.reveal {
  transform: translateY(20px) scale(0.98);
  transition: transform 0.6s var(--ease-bounce);
}
.zo-deliverables.reveal.in-view { transform: translateY(0) scale(1); }
.zo-service.in-view .zo-service-title-col { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.zo-service.in-view > div:last-child { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }

/* Heróis com a fonte "8": abre só com o traçado e preenche em seguida
   (ref. dentsucreative.com/pt-br/work; ver zero11-ds.js). Duas camadas do
   mesmo texto sobrepostas — uma só de contorno, sempre visível, e uma
   preenchida, revelada por um clip-path da esquerda para a direita. */
.zp-hero-heading { --hero-fill-color: #fff; }
.zp-fill-wrap { position: relative; display: inline-block; }
.zp-fill-stroke, .zp-fill-solid {
  display: block; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit;
}
.zp-fill-stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hero-fill-color); text-stroke: 1.5px var(--hero-fill-color);
}
.zp-fill-solid {
  position: absolute; top: 0; left: 0; color: var(--hero-fill-color);
  -webkit-text-stroke: 1.5px var(--hero-fill-color); text-stroke: 1.5px var(--hero-fill-color);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s var(--ease-premium);
}
.zp-hero-heading.zp-filled .zp-fill-solid { clip-path: inset(0 0% 0 0); }
@media (prefers-reduced-motion: reduce) {
  .zp-fill-solid { clip-path: inset(0 0% 0 0) !important; transition: none !important; }
}

/* ══════════════ CURSOR CUSTOMIZADO ══════════════
   Ponto + anel seguindo o mouse (desktop apenas); o anel cresce e ganha
   blend mode ao passar sobre elementos interativos, para reforçar o clique. */
.zcur-dot, .zcur-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; }
.zcur-dot {
  width: 8px; height: 8px; background: var(--color-red); margin: -4px 0 0 -4px;
  transition: transform 0.15s var(--ease-out), opacity 0.2s;
}
.zcur-ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid rgba(210,35,42,0.55);
  transition: transform 0.35s var(--ease-bounce), width 0.35s var(--ease-bounce), height 0.35s var(--ease-bounce),
              margin 0.35s var(--ease-bounce), border-color 0.35s, background 0.35s, opacity 0.2s;
}
.zcur-ring.is-hover { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: rgba(210,35,42,0.1); border-color: transparent; }
body.zcur-active { cursor: none; }
body.zcur-active a, body.zcur-active button, body.zcur-active input, body.zcur-active textarea { cursor: none; }
@media (hover: none), (pointer: coarse) {
  .zcur-dot, .zcur-ring { display: none !important; }
}

/* ══════════════ BARRA DE PROGRESSO DE SCROLL ══════════════ */
.zscroll-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 10000;
  background: linear-gradient(90deg, var(--color-red), var(--color-orange-light));
  transform-origin: left; box-shadow: 0 0 12px rgba(210,35,42,0.6);
}

/* ══════════════ BOTÕES MAGNÉTICOS ══════════════
   Aplicado via JS (zero11-ds.js) em CTAs e no logo: o elemento acompanha o
   cursor levemente dentro de sua área, com uma mola solta ao soltar (--ease-bounce). */
.zmag { transition: transform 0.5s var(--ease-bounce); will-change: transform; }

/* ══════════════ TILT 3D EM CARDS (transform aplicado via JS no mousemove) ══════════════ */
.zs-cards > a, .zi-grid > a, .zo-service, .zp-team > div { will-change: transform; }

/* ══════════════ SWEEP: preenchimento em botões sólidos ══════════════ */
.zc-submit { position: relative; overflow: hidden; z-index: 0; }
.zc-submit::before {
  content: ''; position: absolute; inset: 0; background: var(--color-red-dark);
  transform: translateY(101%); transition: transform 0.45s var(--ease-snap); z-index: -1;
}
.zc-submit:hover::before { transform: translateY(0); }

/* ══════════════ MARQUEE (tags de segmentos) ══════════════ */
.zmarquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.zmarquee-track { display: flex; width: max-content; gap: 8px; animation: zmarquee-scroll 22s linear infinite; }
.zmarquee:hover .zmarquee-track { animation-play-state: paused; }
@keyframes zmarquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .zmarquee-track { animation: none; }
}

/* ══════════════ CONTADORES ANIMADOS (stats) ══════════════ */
.zs-metric-value { font-variant-numeric: tabular-nums; }

/* ══════════════ SPOTLIGHT: brilho seguindo o cursor em seções escuras ══════════════ */
.zspot { position: relative; isolation: isolate; }
.zspot::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(210,35,42,0.22), transparent 70%);
}
.zspot.is-active::before { opacity: 1; }

/* ══════════════ HOVER: links, cards, nav ══════════════ */
.zh-link, .zc-channel { position: relative; }
.zh-link span { transition: transform 0.35s var(--ease-bounce); display: inline-block; }
.zh-link:hover span { transform: translateX(10px); }

.zs-cards > a, .zi-grid > a {
  display: block; text-decoration: none; transition: transform 0.5s var(--ease-bounce);
}
.zs-cards > a:hover, .zi-grid > a:hover { transform: translateY(-10px) scale(1.015); }
.zs-card-img { overflow: hidden; transition: transform 0.6s var(--ease-premium); }
.zs-cards > a:hover .zs-card-img, .zi-grid > a:hover .zs-card-img { transform: scale(1.08) rotate(-0.5deg); }
.zs-card-title { transition: color 0.3s var(--ease-premium); }
.zs-cards > a:hover .zs-card-title, .zi-grid > a:hover .zs-card-title { color: var(--color-red); }

.zp-award, .zp-segment, .zp-cap { transition: transform 0.45s var(--ease-bounce); }
.zp-award:hover, .zp-segment:hover { transform: translateX(6px); }
.zo-service:hover .zo-service-title { color: var(--color-red); transform: translateX(8px); }
.zo-service-title { transition: color 0.3s var(--ease-premium), transform 0.4s var(--ease-bounce); display: inline-block; }

.zp-team-photo { overflow: hidden; transition: transform 0.5s var(--ease-bounce); }
.zp-team > div:hover .zp-team-photo { transform: scale(1.03) rotate(-0.6deg); }
.zp-team-name { transition: color 0.3s var(--ease-premium); }
.zp-team > div:hover .zp-team-name { color: var(--color-red); }

.zn-link { position: relative; transition: transform 0.35s var(--ease-bounce); }
.zn-link:hover { transform: translateY(-2px); }
.zn-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--color-red); transition: right 0.35s var(--ease-snap);
}
.zn-link:hover::after, .zn-link.is-active::after { right: 0; }

.zn-logo-img { transition: transform 0.5s var(--ease-bounce); }
.zn-logo:hover .zn-logo-img { transform: scale(1.08) rotate(-3deg); }

.zf-col a { transition: color 0.3s var(--ease-premium), padding-left 0.3s var(--ease-bounce); display: inline-block; }
.zf-col a:hover { padding-left: 8px; }

.zc-submit { transition: background 0.3s var(--ease-premium), transform 0.35s var(--ease-bounce); }
.zc-submit:hover { transform: translateY(-3px) scale(1.01); }

.zs-tag { transition: transform 0.35s var(--ease-bounce), background 0.25s, color 0.25s; }
.zs-tag:hover { transform: translateY(-4px) scale(1.06); background: var(--color-red); color: #fff; }

.zf-social-icons a { transition: transform 0.4s var(--ease-bounce); }
.zf-social-icons a:hover { transform: translateY(-4px) rotate(-8deg) scale(1.15); }

.zp-video-block { transition: transform 0.5s var(--ease-bounce); }
.zp-video-block:hover { transform: scale(1.02); }

.zc-field { transition: transform 0.3s var(--ease-bounce); }
.zc-field:has(input:focus), .zc-field:has(textarea:focus) { transform: translateX(4px); }

/* ══════════════ TRANSIÇÃO ENTRE PÁGINAS ══════════════
   View Transitions API nativa (Chrome/Edge); navegadores sem suporte apenas
   ignoram e navegam normalmente, sem quebrar nada. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: zn-page-out 0.35s var(--ease-premium) forwards;
}
::view-transition-new(root) {
  animation: zn-page-in 0.5s var(--ease-premium) 0.08s backwards;
}
@keyframes zn-page-out {
  to { opacity: 0; }
}
@keyframes zn-page-in {
  from { opacity: 0; transform: translateY(16px); }
}

/* ══════════════ VÍDEO "ALTA DIREÇÃO CRIATIVA" (quem-somos #2:23 / #21:2567) ══════════════ */
.zp-video-block {
  position: relative; width: 100%; max-width: 342px; aspect-ratio: 342 / 540;
  background: #000 center/cover no-repeat; border: 1px dashed rgba(0,0,0,0.25);
  margin-top: 32px; overflow: hidden; cursor: pointer;
}
.zp-inline-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.zp-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.zp-video-block.has-started .zp-video-poster { display: none; }
.zp-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 60px; height: 60px; border-radius: 50%; background: #ce0058;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; transition: transform 0.3s var(--ease-premium), opacity 0.2s;
}
.zp-video-block.is-playing .zp-video-play { opacity: 0; pointer-events: none; }
.zp-video-block:hover .zp-video-play { transform: translate(-50%,-50%) scale(1.08); }
.zp-video-play::after {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #fff;
}
.zp-video-block.mobile-only { display: block; }
.zp-video-block.desktop-only { display: none; }
@media (min-width: 860px) {
  .zp-video-block.mobile-only { display: none; }
  .zp-video-block.desktop-only { display: block; }
}

/* ══════════════ LIGHTBOX DE VÍDEO ══════════════ */
.zp-lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(10,9,7,0.92);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.zp-lightbox.is-open { display: flex; }
.zp-lightbox-inner { position: relative; width: 100%; max-width: 480px; aspect-ratio: 342/540; background: #000; display: flex; align-items: center; justify-content: center; }
.zp-lightbox-inner p { color: #a89f94; font-size: 14px; text-align: center; padding: 0 32px; }
.zp-lightbox-close {
  position: absolute; top: -48px; right: 0; background: none; border: none; color: #fff;
  font-family: var(--font-sans); font-weight: 900; font-size: 32px; cursor: pointer;
}

/* ══════════════ MATÉRIA (artigo) ══════════════ */
.zm-author { display: flex; align-items: center; gap: 15px; margin-bottom: 24px; }
.zm-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: #d9d9d9 center/cover no-repeat; object-fit: cover; flex: 0 0 auto; }
.zm-author-name { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.zm-author-role { font-size: 15px; color: #555048; }
.zm-article-img { width: 100%; aspect-ratio: 8 / 5; height: auto; overflow: hidden; border-radius: 4px; background: #c4c4c4 center/cover no-repeat; margin: 0 0 32px; }
.zm-article-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zm-article-body { width: 100%; max-width: none; }
.zm-article-body h2 { font-size: 25px; font-weight: 500; color: var(--color-ink); margin: 40px 0 16px; text-transform: none; letter-spacing: normal; }
.zm-article-body h2:first-child { margin-top: 0; }
.zm-article-body p { font-size: 18px; line-height: 1.65; color: #555048; margin: 0 0 20px; }
.zm-article-body a { color: var(--color-red); text-decoration: underline; }