/* ═══════════════════════════════════════════════════════
   HOME 2 — Redesign Light (Blackmagic-inspired)
   Prefixo: h2-  |  11 dobras + contato
═══════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --h2-white:      #ffffff;
  --h2-off:        #f7f7f5;
  --h2-light:      #f0f0ec;
  --h2-dark:       #111110;
  --h2-darker:     #0a0a09;
  --h2-slate:      #1e293b;
  --h2-violet:     #5b21b6;
  --h2-violet-l:   #7c3aed;
  --h2-violet-dim: rgba(124,58,237,0.10);
  --h2-teal:       #0d9488;
  --h2-teal-l:     #14b8a6;
  --h2-teal-dim:   rgba(20,184,166,0.14);
  --h2-gray:       #64748b;
  --h2-gray-l:     #94a3b8;
  --h2-border:     #d1d1ce;  /* mais visível em fundo branco */
  --h2-font-head:  "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --h2-font-body:  'DM Sans', system-ui, sans-serif;
}

/* ── RESET ESCOPO ── */
.h2-body * { box-sizing: border-box; }
.h2-body {
  background: var(--h2-white);
  color: var(--h2-dark);
  font-family: var(--h2-font-body);
  font-size: 18px;
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════
   HOME2 HEADER — preto inicial → branco ao rolar
   Fonte: Mulish 600
══════════════════════════════════════════════════════ */

/* Logo swap: dois pseudo-elementos com cross-fade via .scrolled (vm-layout.js) */
.h2-body .vmh-logo { position: relative; }

/* Oculta o <img> real — mantém o espaço (width: 200px / height: 48px) */
.h2-body .vmh-logo-img { opacity: 0 !important; transition: none !important; }

/* Camada base: logo para fundo preto */
.h2-body .vmh-logo::before,
.h2-body .vmh-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: no-repeat left center / contain;
  transition: opacity .3s ease;
}
.h2-body .vmh-logo::before {
  background-image: url('/wp-content/uploads/2025/02/LogoPretoNovo.png');
  opacity: 0;
}
/* Camada topo: logo para fundo branco (default) */
.h2-body .vmh-logo::after {
  background-image: url('/wp-content/uploads/2024/06/LogoVM-FundoTransparenteBranco.png');
  opacity: 1;
}
/* Swap ao rolar: fundo preto → logo escura */
.h2-body .vmh-header.scrolled .vmh-logo::before { opacity: 1; }
.h2-body .vmh-header.scrolled .vmh-logo::after  { opacity: 0; }

/* Estado inicial: fundo branco */
.h2-body .vmh-header {
  background: #fff !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* Estado rolado: fundo preto */
.h2-body .vmh-header.scrolled {
  background: #000 !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,.4) !important;
}

/* Mulish 600 em toda a navegação */
.h2-body .vmh-nav a,
.h2-body .vmh-dropdown-trigger,
.h2-body .vmh-phone {
  font-family: 'Mulish', var(--h2-font-body) !important;
  font-weight: 600 !important;
}

/* ── Estado BRANCO (padrão): texto preto — somente desktop ── */
@media (min-width: 901px) {
  .h2-body .vmh-header:not(.scrolled) .vmh-nav a,
  .h2-body .vmh-header:not(.scrolled) .vmh-dropdown-trigger { color: #000 !important; }
  .h2-body .vmh-header:not(.scrolled) .vmh-nav a:hover,
  .h2-body .vmh-header:not(.scrolled) .vmh-dropdown-trigger:hover { color: #000 !important; background: rgba(0,0,0,.05) !important; }

  .h2-body .vmh-header:not(.scrolled) .vmh-phone { color: #000 !important; background: transparent !important; }
  .h2-body .vmh-header:not(.scrolled) .vmh-phone:hover { background: rgba(0,0,0,.06) !important; color: #000 !important; }

  .h2-body .vmh-header:not(.scrolled) .vmh-chevron { stroke: #000 !important; }
  .h2-body .vmh-header:not(.scrolled) .vmh-toggle span { background: #000 !important; }

  .h2-body .vmh-header:not(.scrolled) .vmh-nav-cta {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
  }
  .h2-body .vmh-header:not(.scrolled) .vmh-nav-cta:hover { background: rgba(0,0,0,.06) !important; color: #000 !important; }

  .h2-body .vmh-header:not(.scrolled) .vmh-dropdown-menu { background: #fff !important; border-color: rgba(0,0,0,.07) !important; box-shadow: 0 8px 32px rgba(0,0,0,.08) !important; }
  .h2-body .vmh-header:not(.scrolled) .vmh-dropdown-menu a { color: rgba(0,0,0,.70) !important; }
  .h2-body .vmh-header:not(.scrolled) .vmh-dropdown-menu a:hover { color: #000 !important; background: rgba(0,0,0,.04) !important; }
  .h2-body .vmh-header:not(.scrolled) .vmh-dropdown-sep { background: rgba(0,0,0,.06) !important; }
}

/* ── Estado PRETO (scrolled): texto branco ── */
.h2-body .vmh-header.scrolled .vmh-nav a,
.h2-body .vmh-header.scrolled .vmh-dropdown-trigger { color: rgba(255,255,255,.88) !important; }
.h2-body .vmh-header.scrolled .vmh-nav a:hover,
.h2-body .vmh-header.scrolled .vmh-dropdown-trigger:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }

.h2-body .vmh-header.scrolled .vmh-phone { color: rgba(255,255,255,.8) !important; background: transparent !important; }
.h2-body .vmh-header.scrolled .vmh-phone:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }

.h2-body .vmh-header.scrolled .vmh-chevron { stroke: rgba(255,255,255,.62) !important; }
.h2-body .vmh-header.scrolled .vmh-toggle span { background: #fff !important; }

/* CTA: sem caixa, mesmo fundo preto do header */
.h2-body .vmh-header.scrolled .vmh-nav-cta { background: transparent !important; border: none !important; color: rgba(255,255,255,.88) !important; }
.h2-body .vmh-header.scrolled .vmh-nav-cta:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }

/* Dropdown: fundo quase-preto */
.h2-body .vmh-header.scrolled .vmh-dropdown-menu { background: #111 !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 16px 48px rgba(0,0,0,.65) !important; }
.h2-body .vmh-header.scrolled .vmh-dropdown-menu a { color: rgba(255,255,255,.65) !important; }
.h2-body .vmh-header.scrolled .vmh-dropdown-menu a:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
.h2-body .vmh-header.scrolled .vmh-dropdown-sep { background: rgba(255,255,255,.06) !important; }

/* ── CONTAINER ── */
.h2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ── ANIMAÇÕES DE SCROLL ── */
.h2-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.h2-reveal.h2-visible { opacity: 1; transform: translateY(0); }

/* ── BOTÕES ── */
.h2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--h2-font-body);
  font-size: 15px; font-weight: 700;
  padding: 14px 28px; border-radius: 8px;
  text-decoration: none; transition: all .22s;
  white-space: nowrap;
}
.h2-btn-dark {
  background: var(--h2-dark); color: #fff;
  border: 2px solid transparent;
}
.h2-btn-dark:hover { background: var(--h2-slate); transform: translateY(-1px); }
.h2-btn-outline {
  background: transparent; color: var(--h2-dark);
  border: 2px solid var(--h2-border);
}
.h2-btn-outline:hover { border-color: var(--h2-dark); }
.h2-btn-white {
  background: #fff; color: var(--h2-dark);
  border: 2px solid transparent;
}
.h2-btn-white:hover { background: var(--h2-light); transform: translateY(-1px); }
.h2-btn-border-white {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
}
.h2-btn-border-white:hover {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
}

/* ── TIPOGRAFIA HELPERS ── */
.h2-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--h2-violet-l);
  margin-bottom: 14px;
}
.h2-eyebrow-teal { color: var(--h2-teal-l); }

.h2-section-title {
  font-family: var(--h2-font-head);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.1; margin-bottom: 16px;
  color: var(--h2-dark);
}
.h2-title-white { color: #fff; }

.h2-section-sub {
  font-size: 18px; color: var(--h2-gray);
  max-width: 580px; line-height: 1.8;
}
.h2-sub-dim { color: rgba(255,255,255,.45); }

.h2-accent {
  background: linear-gradient(100deg, var(--h2-violet-l) 0%, var(--h2-teal-l) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.h2-accent-light {
  background: linear-gradient(100deg, #c4b5fd 0%, #5eead4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.h2-section-header { margin-bottom: 56px; }

/* ── SEÇÕES GENÉRICAS ── */
.h2-section { padding: 96px 0; }
.h2-section-white { background: var(--h2-white); border-bottom: 1px solid var(--h2-border); }
.h2-section-off   { background: var(--h2-off);   border-bottom: 1px solid var(--h2-border); }
.h2-section-slate { background: var(--h2-slate);  border-bottom: 1px solid rgba(255,255,255,.05); }
/* Dark navy: Playouts + Blog */
.h2-section-navy  { background: #0d1117; border-bottom: 1px solid rgba(255,255,255,.06); }
/* Deep gray-navy: Serviços */
.h2-section-deep  { background: #111827; border-bottom: 1px solid rgba(255,255,255,.06); }
/* Light blue-gray: Utilitários + Parceiros */
.h2-section-mist  { background: #eef0f7; border-bottom: 1px solid #d4d7e3; }

/* ── Dark section: section-header text overrides ── */
.h2-section-navy .h2-section-title,
.h2-section-deep .h2-section-title,
.h2-section-slate .h2-section-title { color: #fff; }

.h2-section-navy .h2-section-sub,
.h2-section-deep .h2-section-sub,
.h2-section-slate .h2-section-sub { color: rgba(255,255,255,.45); }

/* ── Dark section: outline button adapts ── */
.h2-section-navy .h2-btn-outline,
.h2-section-deep .h2-btn-outline {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.22);
}
.h2-section-navy .h2-btn-outline:hover,
.h2-section-deep .h2-btn-outline:hover {
  color: #fff;
  border-color: rgba(255,255,255,.5);
}

/* ── Dobra 3 Playouts on navy: compare link ── */
.h2-section-navy .h2-compare-link a { color: var(--h2-teal-l); }
.h2-section-navy .h2-compare-link a:hover { color: #fff; }

/* ── Dobra 4 Utilitários on mist: grid gap + card colors ── */
.h2-section-mist .h2-utils-grid { background: #bfc2d0; border-color: #bfc2d0; }
.h2-section-mist .h2-util-card { background: var(--h2-white); }
.h2-section-mist .h2-util-card:hover { background: var(--h2-off); }

/* ── Dobra 5 Serviços on slate/deep: dark card adaptation ── */
.h2-section-deep .h2-services-grid,
.h2-section-slate .h2-services-grid { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.06); }
.h2-section-deep .h2-service-card,
.h2-section-slate .h2-service-card { background: rgba(255,255,255,.04); }
.h2-section-deep .h2-service-card:hover,
.h2-section-slate .h2-service-card:hover { background: rgba(255,255,255,.08); }
.h2-section-deep .h2-service-title,
.h2-section-slate .h2-service-title { color: #f1f5f9; }
.h2-section-deep .h2-service-desc,
.h2-section-slate .h2-service-desc { color: rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════════════════
   INTERFACE CARD — partes compartilhadas (hero + banner)
═══════════════════════════════════════════════════════ */
.h2-ic-bar {
  background: #1c1c1a;
  height: 42px; padding: 0 16px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.h2-ic-dot { width: 12px; height: 12px; border-radius: 50%; }
.h2-red    { background: #ff5f57; }
.h2-yellow { background: #febc2e; }
.h2-green  { background: #28c840; }
.h2-ic-title {
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  color: rgba(255,255,255,.35); margin-left: 8px;
}
.h2-ic-live {
  margin-left: auto; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; color: #f87171;
}

.h2-ic-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

.h2-status-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.72);
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 6px;
}
.h2-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.h2-status-dot.h2-on   { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.2); }
.h2-status-dot.h2-stby { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.2); }
.h2-status-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: 2px 7px;
  color: rgba(255,255,255,.5);
}
.h2-prog-bar {
  height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden;
}
.h2-prog-fill {
  height: 100%; width: 62%;
  background: linear-gradient(90deg, var(--h2-violet-l), var(--h2-teal-l));
  border-radius: 2px;
}
.h2-card-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,.35);
  padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════
   DOBRA 1 — HERO  (branco com imagem sutil)
═══════════════════════════════════════════════════════ */
.h2-hero {
  position: relative;
  background-color: #060912;
  background-image: url('/wp-content/uploads/2025/11/bannerhomepagevideomart-scaled.png');
  background-size: cover;
  background-position: center;
  padding: 110px 0 80px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
/* Overlay escuro: texto legível na esquerda, imagem aparece na direita */
.h2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(6,9,26,0.92) 0%,
    rgba(6,9,26,0.78) 40%,
    rgba(6,9,26,0.52) 65%,
    rgba(6,9,26,0.28) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.h2-hero-inner {
  position: relative;
  z-index: 1;
  /* Sem max-width: o container (1200px centrado) já define a largura.
     O texto fica à esquerda naturalmente; a imagem aparece à direita. */
  min-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}

/* Kicker */
.h2-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--h2-teal);
  margin-bottom: 24px;
}
.h2-kicker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--h2-teal-l);
  box-shadow: 0 0 0 3px var(--h2-teal-dim);
  animation: h2Throb 2.5s ease-in-out infinite;
}
@keyframes h2Throb {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.35); }
}

.h2-hero-title {
  font-family: var(--h2-font-head);
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.05; margin-bottom: 24px;
  color: #fff;
}
.h2-hero-desc {
  font-size: 18px; color: rgba(255,255,255,.65);
  line-height: 1.8; max-width: 500px; margin-bottom: 36px;
}
/* Botões no hero escuro */
.h2-hero .h2-btn-dark { background: var(--h2-violet-l); }
.h2-hero .h2-btn-dark:hover { background: #6d28d9; }
.h2-hero .h2-btn-outline {
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.28);
}
.h2-hero .h2-btn-outline:hover {
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.h2-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Interface card no hero */
.h2-interface-card {
  background: var(--h2-dark);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.18), 0 4px 20px rgba(0,0,0,0.10);
}

/* ═══════════════════════════════════════════════════════
   DOBRA 2 — BANNER TVPLAY  (preto)
═══════════════════════════════════════════════════════ */
.h2-banner {
  background: var(--h2-dark);
  padding: 80px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.h2-banner-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.h2-banner-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--h2-teal-l);
  margin-bottom: 16px;
}
.h2-banner-title {
  font-family: var(--h2-font-head);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800; letter-spacing: -2.5px;
  line-height: 1.05; color: #fff;
  margin-bottom: 28px;
}
.h2-banner-title span {
  color: var(--h2-teal-l);
}
.h2-banner-card {
  background: #181818;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   DOBRA 3 — PLAYOUTS  (cinza claro — seção off-white no PHP)
═══════════════════════════════════════════════════════ */
.h2-tvplay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;          /* gap real, sem truque de cor de fundo */
  background: none;
  border: none;
  margin-bottom: 40px;
}

.h2-tvplay-card {
  background: #ffffff;
  border: 1px solid var(--h2-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  padding: 32px 28px 36px;
  display: flex; flex-direction: column;
  position: relative;
  transition: box-shadow .2s, transform .2s, background .2s;
}
.h2-tvplay-card:hover {
  background: var(--h2-off);
  box-shadow: 0 8px 28px rgba(0,0,0,.11);
  transform: translateY(-2px);
}

.h2-tvplay-card.h2-tvplay-featured {
  background: var(--h2-dark);
}
.h2-tvplay-card.h2-tvplay-featured:hover { background: var(--h2-slate); }

.h2-tvplay-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 11px; font-weight: 700;
  background: var(--h2-violet-l); color: #fff;
  padding: 4px 10px; border-radius: 20px;
}
.h2-tvplay-badge--new {
  background: #0891b2;
}

.h2-tvplay-tier {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 10px;
}
.h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-tier { color: var(--h2-violet-l); }
.h2-tvplay-featured .h2-tvplay-tier { color: rgba(255,255,255,.4); }

.h2-tvplay-name {
  font-family: var(--h2-font-head);
  font-size: 28px; font-weight: 800; letter-spacing: -1px;
  line-height: 1.0; margin-bottom: 14px;
}
.h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-name { color: var(--h2-dark); }
.h2-tvplay-featured .h2-tvplay-name { color: #fff; }
.h2-tvplay-name span { font-weight: 900; }

.h2-tvplay-desc {
  font-size: 14.5px; line-height: 1.7; margin-bottom: 20px; flex: 1;
}
.h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-desc { color: var(--h2-gray); }
.h2-tvplay-featured .h2-tvplay-desc { color: rgba(255,255,255,.5); }

.h2-tvplay-features {
  list-style: none; display: flex; flex-direction: column;
  gap: 8px; margin-bottom: 24px;
}
.h2-tvplay-features li {
  font-size: 13.5px;
  display: flex; align-items: flex-start; gap: 8px;
}
.h2-tvplay-features li::before { content: '→'; font-weight: 700; flex-shrink: 0; }
.h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-features li { color: var(--h2-gray); }
.h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-features li::before { color: var(--h2-violet-l); }
.h2-tvplay-featured .h2-tvplay-features li { color: rgba(255,255,255,.48); }
.h2-tvplay-featured .h2-tvplay-features li::before { color: rgba(255,255,255,.25); }

.h2-card-link {
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s; margin-top: auto;
}
.h2-card-link:hover { gap: 10px; }
.h2-tvplay-card:not(.h2-tvplay-featured) .h2-card-link { color: var(--h2-violet-l); }
.h2-tvplay-featured .h2-card-link { color: #fff; }

.h2-compare-link {
  text-align: center;
  font-size: 14px; font-weight: 600;
}
.h2-compare-link a {
  color: var(--h2-violet-l);
  text-decoration: none;
  transition: color .2s;
}
.h2-compare-link a:hover { color: var(--h2-dark); }

/* ═══════════════════════════════════════════════════════
   DOBRA 4 — UTILITÁRIOS  (cinza claro)
═══════════════════════════════════════════════════════ */
.h2-utils-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--h2-border);
  border: 1px solid var(--h2-border);
  border-radius: 14px; overflow: hidden;
  margin-bottom: 40px;
}
.h2-util-card {
  background: var(--h2-off);
  padding: 28px 22px;
  display: flex; flex-direction: column;
  gap: 10px;
  text-decoration: none;
  transition: background .2s;
}
.h2-util-card:hover { background: var(--h2-white); }

.h2-util-icon {
  width: 40px; height: 40px;
  color: var(--h2-violet-l);
}
.h2-util-icon svg { width: 100%; height: 100%; }

.h2-util-name {
  font-family: var(--h2-font-head);
  font-size: 14px; font-weight: 800; letter-spacing: -.3px;
  color: var(--h2-dark);
}
.h2-util-desc {
  font-size: 13px; color: var(--h2-gray);
  line-height: 1.5;
}
.h2-utils-cta { text-align: center; }

/* ═══════════════════════════════════════════════════════
   DOBRA 5 — SERVIÇOS  (branco)
═══════════════════════════════════════════════════════ */
.h2-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--h2-border);
  border: 1px solid var(--h2-border);
  border-radius: 14px; overflow: hidden;
}
.h2-service-card {
  background: var(--h2-white);
  padding: 36px 28px;
  transition: background .2s;
}
.h2-service-card:hover { background: var(--h2-off); }

.h2-service-icon {
  width: 44px; height: 44px;
  color: var(--h2-violet-l);
  margin-bottom: 20px;
}
.h2-service-icon svg { width: 100%; height: 100%; }

.h2-service-title {
  font-family: var(--h2-font-head);
  font-size: 20px; font-weight: 800; letter-spacing: -.5px;
  color: var(--h2-dark); margin-bottom: 12px;
}
.h2-service-desc {
  font-size: 15px; color: var(--h2-gray); line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════
   DOBRA 6 — NÚMEROS  (dark gradient, estilo nova-home)
═══════════════════════════════════════════════════════ */
.h2-numbers {
  background: linear-gradient(135deg, rgba(111,75,241,.12) 0%, rgba(56,189,248,.07) 100%) #07080f;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0;
}
.h2-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 80px 0;
  text-align: center;
}
.h2-number-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.h2-number-value {
  display: flex; align-items: baseline; gap: 0;
}
.h2-number-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px; top: 50%;
  transform: translateY(-50%);
  height: 60px; width: 1px;
  background: rgba(255,255,255,.08);
}

.h2-big-number {
  font-family: var(--h2-font-head);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 900; letter-spacing: -3px;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, var(--h2-violet-l) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
.h2-number-suffix {
  font-family: var(--h2-font-head);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900; letter-spacing: -1px;
  color: var(--h2-violet-l); line-height: 1;
  display: inline-block;
}
.h2-number-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45); line-height: 1.3;
  text-align: center; max-width: 180px;
}

/* ═══════════════════════════════════════════════════════
   DOBRA 7 — PARCEIROS  (cinza claro)
═══════════════════════════════════════════════════════ */
.h2-partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.h2-partner-item {
  font-family: var(--h2-font-head);
  font-size: 17px; font-weight: 800; letter-spacing: -.3px;
  color: var(--h2-gray);     /* aumentado de gray-l para gray */
  background: var(--h2-white);
  border: 1px solid var(--h2-border);
  border-radius: 8px;
  padding: 14px 28px;
  transition: all .2s;
}
.h2-partner-item:hover {
  color: var(--h2-dark);
  border-color: var(--h2-gray-l);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* ═══════════════════════════════════════════════════════
   DOBRA 8 — CLIENTES TICKER  (preto, logos brancos)
═══════════════════════════════════════════════════════ */
.h2-clients-dark {
  background: #000;
  padding: 80px 0 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.h2-clients-dark .h2-section-header { margin-bottom: 48px; }
.h2-clients-dark .h2-eyebrow { color: rgba(255,255,255,.35); }
.h2-clients-dark .h2-section-title { color: #fff; }
.h2-clients-dark .h2-section-sub { color: rgba(255,255,255,.42); }

.h2-ticker-outer {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 48px 0 52px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.h2-ticker-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: h2Ticker 28s linear infinite;
}
.h2-ticker-track:hover { animation-play-state: paused; }

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

.h2-client-item {
  flex-shrink: 0;
  width: 220px;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.h2-client-logo-wrap {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  width: 100%; height: 110px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 22px;
  transition: background .2s, border-color .2s;
  overflow: hidden;
}
.h2-client-item:hover .h2-client-logo-wrap {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.2);
}
.h2-client-logo-wrap img {
  max-width: 88%; max-height: 68px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter .25s, opacity .25s;
}
.h2-client-item:hover .h2-client-logo-wrap img {
  filter: grayscale(0);
  opacity: 1;
}

.h2-client-name {
  font-size: .65rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; text-align: center; line-height: 1.3;
  color: rgba(255,255,255,0.38);
  transition: color .2s;
}
.h2-client-item:hover .h2-client-name { color: rgba(255,255,255,0.65); }

/* Fallback quando não há imagem */
.h2-client-noimg .h2-client-logo-wrap { background: rgba(255,255,255,0.03); }
.h2-client-noimg .h2-client-logo-wrap img { display: none; }
.h2-client-noimg .h2-client-name {
  font-family: var(--h2-font-head);
  font-size: 16px; font-weight: 800; letter-spacing: -.2px;
  text-transform: none;
  color: rgba(255,255,255,.28);
}
.h2-client-noimg:hover .h2-client-name { color: rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════════════
   DOBRA 9 — INTERFACE SCREENSHOTS  (slate)
═══════════════════════════════════════════════════════ */
.h2-screen-feature {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; overflow: hidden;
  margin-bottom: 20px;
}
.h2-screen-chrome {
  background: #0f1622;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.h2-screen-chrome-feat { padding: 14px 20px; }
.h2-screen-dots {
  display: flex; gap: 6px;
}
.h2-screen-dots span {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.h2-screen-dots span:nth-child(1) { background: #ff5f57; }
.h2-screen-dots span:nth-child(2) { background: #febc2e; }
.h2-screen-dots span:nth-child(3) { background: #28c840; }
.h2-screen-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  color: rgba(255,255,255,.35);
}
.h2-screen-img {
  display: block; width: 100%;
  object-fit: cover;
  background: #0a0f1a;
}
.h2-screen-feature .h2-screen-img { max-height: 420px; }

.h2-screens-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.h2-screen-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; overflow: hidden;
}
.h2-screen-card .h2-screen-img { max-height: 200px; }

/* ═══════════════════════════════════════════════════════
   DOBRA 10 — BLOG  (cinza claro)
═══════════════════════════════════════════════════════ */
.h2-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.h2-blog-card {
  text-decoration: none;
  border: 1px solid var(--h2-border);
  border-radius: 12px; overflow: hidden;
  background: var(--h2-white);
  display: flex; flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}
.h2-blog-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.h2-blog-thumb {
  height: 200px;
  background-size: cover; background-position: center;
  background-color: var(--h2-light);
  position: relative;
}
.h2-blog-cat {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--h2-dark); color: #fff;
  padding: 4px 10px; border-radius: 4px;
}
.h2-blog-body { padding: 24px 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.h2-blog-date {
  font-size: 12.5px; color: var(--h2-gray-l); font-weight: 500;
}
.h2-blog-title {
  font-family: var(--h2-font-head);
  font-size: 19px; font-weight: 800; letter-spacing: -.5px;
  color: var(--h2-dark); line-height: 1.25;
  flex: 1;
}
.h2-blog-link {
  font-size: 14px; font-weight: 700;
  color: var(--h2-violet-l);
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════
   DOBRA 11 — CTA FINAL  (preto)
═══════════════════════════════════════════════════════ */
.h2-cta-final {
  background: var(--h2-darker);
  padding: 100px 0;
}
.h2-cta-final-inner {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.h2-cta-final-title {
  font-family: var(--h2-font-head);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 800; letter-spacing: -2.5px;
  line-height: 1.08; color: #fff;
  margin-bottom: 8px;
}
.h2-cta-final-sub {
  font-size: 18px; color: rgba(255,255,255,.45);
  line-height: 1.8; max-width: 560px;
}
.h2-cta-final-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.h2-cta-final-phone {
  font-size: 14px; color: rgba(255,255,255,.3);
  margin-top: 8px;
}


/* ── Dobra 3 Playouts: cards escuros no fundo navy ── */
.h2-section-navy .h2-tvplay-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
  box-shadow: none;
}
.h2-section-navy .h2-tvplay-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(111,75,241,.4);
  transform: translateY(-4px);
  box-shadow: 0 0 40px rgba(111,75,241,.15);
}
.h2-section-navy .h2-tvplay-card.h2-tvplay-featured {
  background: linear-gradient(180deg, rgba(111,75,241,.10) 0%, rgba(111,75,241,.04) 100%);
  border-color: rgba(111,75,241,.5);
}
.h2-section-navy .h2-tvplay-card.h2-tvplay-featured:hover {
  background: linear-gradient(180deg, rgba(111,75,241,.16) 0%, rgba(111,75,241,.08) 100%);
}
/* TVPLAY 4 — teal gradient */
.h2-section-navy .h2-tvplay-grid .h2-tvplay-card:nth-child(5) {
  background: linear-gradient(180deg, rgba(20,184,166,.07) 0%, rgba(111,75,241,.04) 100%);
  border-color: rgba(20,184,166,.3);
}
/* TVPLAY-WEB — cyan/web gradient */
.h2-section-navy .h2-tvplay-grid .h2-tvplay-card.h2-tvplay-web {
  background: linear-gradient(180deg, rgba(14,165,233,.09) 0%, rgba(6,182,212,.04) 100%);
  border-color: rgba(14,165,233,.35);
}
.h2-section-navy .h2-tvplay-grid .h2-tvplay-card.h2-tvplay-web:hover {
  border-color: rgba(14,165,233,.6);
  box-shadow: 0 0 40px rgba(14,165,233,.12);
}
/* Texto dos cards não-featured em fundo escuro */
.h2-section-navy .h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-tier { color: rgba(255,255,255,.38); }
.h2-section-navy .h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-name { color: #e2e8f0; }
.h2-section-navy .h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-desc { color: rgba(255,255,255,.45); }
.h2-section-navy .h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-features li { color: rgba(255,255,255,.48); }
.h2-section-navy .h2-tvplay-card:not(.h2-tvplay-featured) .h2-tvplay-features li::before { color: var(--h2-violet-l); }
.h2-section-navy .h2-tvplay-card:not(.h2-tvplay-featured) .h2-card-link { color: var(--h2-violet-l); }
.h2-section-navy .h2-tvplay-card:not(.h2-tvplay-featured) .h2-card-link:hover { color: var(--h2-teal-l); }

/* ── Dobra 4 Utilitários: grid escuro (navy ou deep) ── */
.h2-section-navy .h2-utils-grid,
.h2-section-deep .h2-utils-grid {
  gap: 14px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.h2-section-navy .h2-util-card,
.h2-section-deep .h2-util-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}
.h2-section-navy .h2-util-card:hover,
.h2-section-deep .h2-util-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(111,75,241,.4);
  transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(111,75,241,.1);
}
.h2-section-navy .h2-util-icon,
.h2-section-deep .h2-util-icon { color: var(--h2-violet-l); }
.h2-section-navy .h2-util-name,
.h2-section-deep .h2-util-name { color: #e2e8f0; }
.h2-section-navy .h2-util-desc,
.h2-section-deep .h2-util-desc { color: rgba(255,255,255,.42); }

/* ── Dobra 5 Serviços on navy: estilo nova-home ── */
.h2-section-navy .h2-services-grid {
  gap: 24px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.h2-section-navy .h2-service-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.h2-section-navy .h2-service-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(111,75,241,.4);
  transform: translateY(-4px);
  box-shadow: 0 0 40px rgba(111,75,241,.15);
}
.h2-section-navy .h2-service-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  background: rgba(111,75,241,.1);
  border-radius: 12px;
  margin-bottom: 20px;
  color: var(--h2-violet-l);
}
.h2-section-navy .h2-service-title { color: #e2e8f0; font-size: 18px; }
.h2-section-navy .h2-service-desc  { color: rgba(255,255,255,.5); }

/* ── Banner inferior (entre formulário e rodapé) ── */
.h2-footer-banner {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #2211aa;
}
.h2-footer-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.42;
  display: block;
}

/* ── Formulário: respira acima do rodapé ── */
.h2-body .vmf-section { padding-bottom: 80px; }
.h2-body .vmf-footer  { margin-top: 0; }

/* ═══════════════════════════════════════════════════════
   PALETA ALTERNADA — dobras coloridas
   D1 dark-img → D2 vivid-blue → D3 vivid-purple → D4 vivid-green
   → D5 dark-indigo → D6 vivid-red → D7 vivid-ocean
   → D8 dark-indigo → D9 vivid-violet → D10 dark → D11 black
═══════════════════════════════════════════════════════ */

/* ── D2 BANNER TVPLAY — azul elétrico #0e4daf ── */
.h2-banner {
  background: #0e4daf;
  border-bottom-color: rgba(0,0,0,.18);
}
.h2-banner .h2-banner-eyebrow { color: rgba(255,255,255,.65); }
.h2-banner .h2-banner-title   { color: #fff; }
.h2-banner .h2-banner-title span { color: #93c5fd; }
.h2-banner .h2-banner-card {
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.14);
}
.h2-banner .h2-ic-bar {
  background: rgba(0,0,0,.38);
  border-bottom-color: rgba(255,255,255,.08);
}
.h2-banner .h2-status-row {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.08);
}
.h2-banner .h2-prog-fill {
  background: linear-gradient(90deg, #93c5fd, #67e8f9);
}
.h2-banner .h2-btn-white { background: #fff; color: #0e4daf; }
.h2-banner .h2-btn-white:hover { background: #dbeafe; transform: translateY(-1px); }

/* ── D3 PLAYOUTS — roxo quase-preto #080114 ── */
#h2-playouts-cards {
  background: #080114 !important;
  border-bottom-color: rgba(0,0,0,.22) !important;
}
/* eyebrow violet some no fundo violeta: usa branco rebaixado */
#h2-playouts-cards .h2-eyebrow { color: rgba(255,255,255,.55); }
/* accent gradient invisível em violeta: lavanda clara */
#h2-playouts-cards .h2-accent {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #c4b5fd;
  color: #c4b5fd;
}
/* featured card: violet-tint some em #280075 — usa white-tint */
#h2-playouts-cards .h2-tvplay-card.h2-tvplay-featured {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.24);
}
#h2-playouts-cards .h2-tvplay-card.h2-tvplay-featured:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.38);
}
/* card-link: #7c3aed invisível em #280075 — usa lavanda */
#h2-playouts-cards .h2-tvplay-card .h2-card-link { color: #c4b5fd; }
#h2-playouts-cards .h2-tvplay-card .h2-card-link:hover { color: #fff; }

/* ── D4 UTILITÁRIOS — indigo #1a0e73 ── */
#utilitarios {
  background: #1a0e73 !important;
  border-bottom-color: rgba(0,0,0,.22) !important;
}
#utilitarios .h2-eyebrow       { color: rgba(255,255,255,.55); }
#utilitarios .h2-section-title { color: #fff; }
#utilitarios .h2-section-sub   { color: rgba(255,255,255,.75); }
#utilitarios .h2-utils-grid {
  gap: 14px;
  background: none; border: none;
  border-radius: 0; overflow: visible;
}
#utilitarios .h2-util-card {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
}
#utilitarios .h2-util-card:hover {
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(0,0,0,.3);
}
#utilitarios .h2-util-icon { color: #c4b5fd; }
#utilitarios .h2-util-name { color: #fff; }
#utilitarios .h2-util-desc { color: rgba(255,255,255,.62); }
#utilitarios .h2-btn-outline {
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.35);
}
#utilitarios .h2-btn-outline:hover {
  color: #fff; border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
}

/* ── D5 SERVIÇOS — preto quase-puro #080808 ── */
#servicos {
  background: #080808 !important;
  border-bottom-color: rgba(255,255,255,.05) !important;
}

/* ── D6 NÚMEROS — carvão quente #25221d ── */
.h2-numbers {
  background: #25221d;
  border-top-color: rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.06);
}
.h2-number-item:not(:last-child)::after { background: rgba(255,255,255,.18); }
.h2-numbers .h2-big-number {
  background-image: none;
  -webkit-text-fill-color: #fff;
}
.h2-numbers .h2-number-suffix { color: rgba(255,255,255,.78); }
.h2-numbers .h2-number-label  { color: rgba(255,255,255,.58); }

/* ── D7 PARCEIROS — azul oceano #0c4a6e ── */
#parceiros {
  background: #0c4a6e !important;
  border-bottom-color: rgba(0,0,0,.15) !important;
}
#parceiros .h2-eyebrow       { color: rgba(255,255,255,.48); }
#parceiros .h2-section-title { color: #fff; }
#parceiros .h2-partner-item {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
}
#parceiros .h2-partner-item:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  box-shadow: none;
}

/* ── D8 CLIENTES — quase-preto #0c0f10 ── */
.h2-clients-dark { background: #0c0f10; }
.h2-clients-dark .h2-section-title { color: #fff; }
.h2-clients-dark .h2-section-sub   { color: rgba(255,255,255,.72); }
.h2-clients-dark .h2-eyebrow       { color: rgba(255,255,255,.55); }

/* ── D9 INTERFACE — azul-indigo #1c1e7f ── */
#interface {
  background: #1c1e7f !important;
  border-bottom-color: rgba(0,0,0,.18) !important;
}
#interface .h2-eyebrow-teal { color: rgba(255,255,255,.5); }
#interface .h2-title-white  { color: #fff; }
#interface .h2-sub-dim      { color: rgba(255,255,255,.6); }
#interface .h2-screen-feature { border-color: rgba(255,255,255,.2); }
#interface .h2-screen-card    { border-color: rgba(255,255,255,.16); }
#interface .h2-screen-chrome  {
  background: rgba(0,0,0,.45);
  border-bottom-color: rgba(255,255,255,.1);
}

/* ── D10 BLOG — dark navy #0d1117 (classe mantém) ── */
/* Blog cards são brancos sobre escuro — bom contraste ✓ */
#blog .h2-blog-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.4); }

/* ── Accent (gradient text) → tom claro da cor do fundo em cada dobra vivid ── */
/* Reset helper: cancela o gradient-clip e aplica cor sólida */
#utilitarios .h2-accent,
#servicos .h2-accent,
#parceiros .h2-accent,
#interface .h2-accent {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
/* D4 indigo → lavanda clara */
#utilitarios .h2-accent { -webkit-text-fill-color: #c4b5fd; color: #c4b5fd; }
/* D5 indigo escuro → lavanda clara */
#servicos .h2-accent    { -webkit-text-fill-color: #c4b5fd; color: #c4b5fd; }
/* D7 oceano → azul céu claro */
#parceiros .h2-accent   { -webkit-text-fill-color: #7dd3fc; color: #7dd3fc; }
/* D9 violeta → lavanda suave */
#interface .h2-accent   { -webkit-text-fill-color: #e9d5ff; color: #e9d5ff; }

/* D6 laranja: sem títulos com .h2-accent — números em branco já configurado ✓ */
/* D3 e D10 (fundos escuros): gradient text do .h2-accent funciona bem — mantém */

/* ═══════════════════════════════════════════════════════
   RESPONSIVO
═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .h2-utils-grid    { grid-template-columns: repeat(3, 1fr); }
  .h2-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .h2-hero-inner    { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
  .h2-hero-title    { font-size: clamp(40px, 8vw, 64px); }
  .h2-hero-visual   { max-width: 540px; margin: 0 auto; }
  .h2-banner-inner  { grid-template-columns: 1fr; gap: 40px; }
  .h2-tvplay-grid   { grid-template-columns: repeat(2, 1fr); }
  .h2-numbers-grid  { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 60px 0; }
  .h2-number-item::after { display: none; }
  .h2-screens-row   { grid-template-columns: 1fr 1fr; }
  .h2-blog-grid     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .h2-container     { padding: 0 28px; }
  .h2-section       { padding: 72px 0; }
  .h2-tvplay-grid   { grid-template-columns: 1fr; }
  .h2-utils-grid    { grid-template-columns: repeat(2, 1fr); }
  .h2-services-grid { grid-template-columns: 1fr 1fr; }
  .h2-screens-row   { grid-template-columns: 1fr; }
  .h2-blog-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .h2-container     { padding: 0 20px; }
  .h2-hero          { padding: 90px 0 60px; }
  .h2-hero-title    { font-size: clamp(36px, 10vw, 52px); letter-spacing: -2px; }
  .h2-hero-ctas     { flex-direction: column; }
  .h2-hero-ctas .h2-btn { width: 100%; justify-content: center; }
  .h2-utils-grid    { grid-template-columns: repeat(2, 1fr); }
  .h2-services-grid { grid-template-columns: 1fr; }
  .h2-numbers-grid  { grid-template-columns: 1fr 1fr; gap: 24px; }
  .h2-number-item   { padding: 40px 20px; }
  .h2-cta-final-actions { flex-direction: column; align-items: stretch; }
  .h2-cta-final-actions .h2-btn { width: 100%; justify-content: center; }
  .h2-banner-inner  { grid-template-columns: 1fr; }
  .h2-section-title { font-size: clamp(28px, 8vw, 42px); letter-spacing: -1.5px; }
}