# Descomplicar Brand Guidelines para Vídeos

## Cores da Marca

```tsx
const DESCOMPLICAR_COLORS = {
  primary: "#1e3a8a",      // Azul escuro
  secondary: "#7c3aed",    // Roxo
  accent: "#06b6d4",       // Cyan
  dark: "#0f172a",         // Quase preto
  light: "#f8fafc",        // Quase branco
  gradient: "linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%)",
};
```

## Tipografia

```tsx
// Google Fonts recomendadas
import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
import { loadFont as loadPoppins } from "@remotion/google-fonts/Poppins";

const { fontFamily: inter } = loadInter();
const { fontFamily: poppins } = loadPoppins();

// Uso
const FONTS = {
  heading: poppins,    // Títulos
  body: inter,         // Texto corrido
};
```

## Estilos Padrão

### Título Principal
```tsx
const titleStyle = {
  fontFamily: poppins,
  fontSize: 80,
  fontWeight: "bold",
  color: "white",
  textShadow: "0 4px 20px rgba(0,0,0,0.3)",
};
```

### Subtítulo
```tsx
const subtitleStyle = {
  fontFamily: inter,
  fontSize: 36,
  fontWeight: 500,
  color: "rgba(255,255,255,0.9)",
  letterSpacing: 2,
};
```

### CTA (Call-to-Action)
```tsx
const ctaStyle = {
  fontFamily: inter,
  fontSize: 28,
  fontWeight: 600,
  color: "#06b6d4",
  textTransform: "uppercase",
};
```

## Animações Recomendadas

### Entrada de Título
```tsx
const titleOpacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: "clamp",
});

const titleScale = spring({
  frame,
  fps,
  config: { damping: 12, stiffness: 100, mass: 0.5 },
});
```

### Entrada de Subtítulo (após título)
```tsx
const subtitleOpacity = interpolate(frame, [30, 60], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

const subtitleY = interpolate(frame, [30, 60], [20, 0], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});
```

### Linha Decorativa
```tsx
const lineWidth = interpolate(frame, [45, 90], [0, 300], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});
```

## Estrutura de Composição Padrão

```tsx
export const DescomplicarVideo: React.FC<Props> = ({ title, subtitle }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill
      style={{
        background: DESCOMPLICAR_COLORS.gradient,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* Logo/Título */}
      <div style={{ ...titleStyle, opacity: titleOpacity }}>
        {title}
      </div>

      {/* Subtítulo */}
      <div style={{ ...subtitleStyle, opacity: subtitleOpacity }}>
        {subtitle}
      </div>

      {/* Elemento decorativo */}
      <div
        style={{
          position: "absolute",
          bottom: 80,
          width: lineWidth,
          height: 3,
          background: "rgba(255,255,255,0.7)",
          borderRadius: 2,
        }}
      />
    </AbsoluteFill>
  );
};
```

## Assinatura

Incluir no final de vídeos promocionais:
```
Descomplicar® - Crescimento Digital
descomplicar.pt
```

## Durações Recomendadas

| Tipo | Frames (30fps) | Segundos |
|------|----------------|----------|
| Logo intro | 90-150 | 3-5s |
| Social post | 150-450 | 5-15s |
| Promo curta | 450-900 | 15-30s |
| Explainer | 1800+ | 60s+ |