← Volver a coplero.ai

COPLERO

A.I. Content Production Company · Brandbook

Documento oficial
Versión 1.0 · 2026
1 · Identidad de Marca

¿Qué es Coplero?

Productora audiovisual argentina impulsada por inteligencia artificial. Combinamos tecnología de vanguardia con una metodología de trabajo precisa y eficiente. Priorizamos profesionalismo, realismo, velocidad y calidad en cada proyecto.

Tagline
A.I. Content Production Company
Origen
Argentina · "desde el sur"
WhatsApp
+54 387 560 1433
Web / Instagram

Servicios

2 · Logotipos Oficiales

Coplero tiene 4 archivos de logo. La regla de oro: isotipo = solo el sol (C), logo = isotipo + texto "coplero".
Elegí el que contraste correctamente según el fondo. Nunca uses un logo que no se vea bien.

Logo + Título Blanco
Logo + Título Blanco
Uso: Fondos oscuros (#001B66, negro, azul primario)
Descripción: Isotipo (sol) + texto "coplero" en blanco
Donde usar: Header/footer web, videos, fondos oscuros
LogoYTituloBlanco.png
Logo + Título Negro
Logo + Título Negro
Uso: Fondos claros (blanco, gris claro, beige)
Descripción: Isotipo (sol) + texto "coplero" en negro
Donde usar: Recibos, facturas, documentos claros, papel
LogoYTituloNegro.png
Isotipo Blanco
Isotipo Blanco (solo sol)
Uso: Fondos oscuros (#001B66, negro)
Descripción: Solo el sol (letra C) en blanco, sin texto
Donde usar: Favicon, cursor custom, adornos, elementos pequeños
isotipoBlanco.png
Isotipo Negro
Isotipo Negro (solo sol)
Uso: Fondos claros (blanco, gris claro)
Descripción: Solo el sol (letra C) en negro, sin texto
Donde usar: Documentos claros, membretes, tarjetas
isotipoNegro.png

Guía Rápida: Qué Logo Usar Según el Fondo

Fondo Logo a Usar Archivo Ejemplo de Uso
Azul Primario (#001B66) Logo + Título BLANCO LogoYTituloBlanco.png Header web, footer web, videos
Negro (#000000) Logo + Título BLANCO LogoYTituloBlanco.png Videos, fondos oscuros
Blanco / Light Gray (#FFFFFF / #F5F5F7) Logo + Título NEGRO LogoYTituloNegro.png Recibos, facturas, documentos
Cualquier fondo (elemento pequeño) Isotipo (solo sol) B/N isotipoBlanco.png o isotipoNegro.png Favicon, cursor, adornos
⚠ Usos Prohibidos de los Logotipos
3 · Identidad Visual

Paleta Cromática Oficial

Azul Primario
#001B66
Azul Eléctrico
#1718FF
Gris Claro
#E3E5F3
Negro
#000000
Color HEX RGB CMYK Uso
Azul Primario #001B66 R0 G27 B102 C100 M74 Y0 K60 Fondo web, textos base
Azul Eléctrico #1718FF R23 G24 B255 C91 M91 Y0 K0 Acentos, enlaces, highlights
Gris Claro #E3E5F3 R227 G229 B243 C7 M6 Y0 K5 Textos web, fondos claros
Negro #000000 R0 G0 B0 C0 M0 Y0 K100 Textos en documentos claros

Gradientes Coplero (para documentos generados por IA)

Usar con opacidad extremadamente baja para no interferir con la legibilidad.

Estilo "Ink Cloud" — deep indigo / purple with cyan edges (para infografías, estrategias, propuestas)

Estilo Sutil — soft indigo / blue tones (para recibos, documentos formales)

Tipografía Oficial

Display — Darker Grotesque (Web) / Helvetica Neue (Fallback)
COPLERO · TÍTULOS BRUTALES

Pesos: 800, 900 · Tracking: -0.04em · Text-transform: uppercase · Clamp() para tamaños

Body — Helvetica Neue (Principal) / Inter / SF Pro (Fallback)
Texto corpo, descripciones y copy general. Pesos: Bold (700), Medium (500), Light (300). Clean geometric sans-serif para máxima legibilidad en documentos.
Editorial Accent — Fraunces Italic (Web) / Playfair Display Italic (Fallback)
Las palabras enfatizadas deben ir en itálica serif para marcar contraste.

Uso: vende, atención, impacto, mensaje — siempre en <em>

4 · Directrices de Diseño
Filosofía
Cinematic dark editorial + brutalismo tipográfico argentino
Elemento distintivo
El Sol (reinterpretación del sol argentino → letra C)
Textura global
Grain (SVG feTurbulence, opacidad 8%)
Cursor
Custom (sol que sigue el mouse) — NO cursor: default
⚠ Prohibiciones Absolutas en Diseño

Copy Guidelines

Idioma
Español argentino (ES-AR) · Voseo
Tono
Directo, con actitud, orientado a resultados
Headers
Uppercase vía CSS, no hardcoded
Números
Palabras en copy, cifras en bullets
5 · Plantillas para Agentes de IA

Cada plantilla tiene 4 bloques estructurados para que cualquier agente de IA (imagen o código) pueda generar documentos con identidad Coplero.
Agente Imagen: copia el Image Gen Prompt verbatim → genera PNG/JPG.
Agente Código: lee Visual Spec + HTML/CSS Reference → genera HTML/CSS funcional.

Comparativa Rápida de Plantillas

Plantilla Formato Uso Background Logo a Usar
Recibo de Pago Documento formal Recibos, comprobantes, facturas Fondo blanco (#FFFFFF) + gradiente sutil LogoYTituloNegro.png (fondo claro)
Infografía Estrategia Infografía planificación Ideas contenido, estrategias redes Ink cloud gradient sobre #001B66 LogoYTituloBlanco.png (fondo oscuro)
Propuesta Evento Proposal / Presupuesto Cobertura audiovisual, presupuestos Ink cloud gradient sobre #001B66 LogoYTituloBlanco.png (fondo oscuro)

Template 1 — Recibo de Pago Premium

Vertical · A4/4:5 · Fondo Claro
LOGO PARA ESTE TEMPLATE: Usar LogoYTituloNegro.png (Logo + Título Negro) porque el fondo es blanco/light gray.
Si el documento tiene una sección oscura, usar LogoYTituloBlanco.png en esa sección específica.
Visual Spec (para agente de código)
PropiedadValor
FormatoVertical — A4 (210×297mm) o relación 4:5 (800×1000px)
BackgroundFondo blanco (#FFFFFF) o very light gray (#F5F5F7). Gradiente Coplero sutil: linear-gradient(135deg, rgba(0,27,102,0.06) 0%, rgba(23,24,255,0.04) 100%)
TexturaOpcional: grain texture muy suave (SVG feTurbulence, opacity 0.03)
TypographyClean geometric sans-serif: Inter / SF Pro / Helvetica Neue. Jerarquía: Small label → Large title → Info blocks → Total → Signature
ColorsTexto: #1A1A1A · Acentos: #1718FF · Dividers: #E0E0E0 · Highlight total: rgba(23,24,255,0.08)
LayoutLeft-aligned, structured grid tipo invoice profesional. Boxed sections, thin dividers. Logo top-right.
LogoLogoYTituloNegro.png en top-right corner (fondo claro). No overuse. Firma de Juan Gutierrez en sección final.
SpecialHighlighted box para monto total. Signature area al final. Thin lines entre secciones.
HTML/CSS Reference (código mínimo funcional)
HTML + CSS inline para recibo base (logo negro sobre fondo claro)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    * { box-sizing: border-box; margin:0; padding:0; }
    body {
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
      background: #FFFFFF;
      color: #1A1A1A;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    .header { display: flex; justify-content: space-between; border-bottom: 2px solid #001B66; padding-bottom: 1rem; margin-bottom: 2rem; }
    .logo { height: 40px; }
    .title { font-size: 1.5rem; font-weight: 700; color: #001B66; text-transform: uppercase; letter-spacing: 0.1em; }
    .subtitle { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: #555; }
    .section { margin: 1.5rem 0; padding: 1rem; border: 1px solid #E0E0E0; border-radius: 6px; }
    .total-box { background: rgba(23,24,255,0.08); border: 1px solid #1718FF; border-radius: 6px; padding: 1rem; text-align: center; margin: 1.5rem 0; }
    .total-amount { font-size: 2rem; font-weight: 700; color: #001B66; }
    .divider { height: 1px; background: #E0E0E0; margin: 1rem 0; }
    .signature { margin-top: 2rem; text-align: right; }
    .signature img { height: 60px; }
  </style>
</head>
<body>
  <div class="header">
    <div>
      <div class="subtitle">Comprobante de Pago</div>
      <div class="title">RECIBO</div>
    </div>
    <img src="/LogoYTituloNegro.png" class="logo" alt="Coplero">
  </div>

  <div class="section">
    <!-- Info block content here -->
  </div>

  <div class="total-box">
    <div class="subtitle">Total Pagado</div>
    <div class="total-amount">$XX.XXX ARS</div>
  </div>

  <div class="signature">
    <img src="signature.png" alt="Firma Juan Gutierrez">
    <div style="font-size:0.8rem; color:#555;">Juan Gutierrez</div>
  </div>
</body>
</html>
Image Gen Prompt (verbatim para agente imagen)
Prompt verbatim para IA image generation:
Create a premium, modern payment receipt document that combines a formal financial receipt layout with COPLERO's visual identity. The design should look like an official receipt or invoice, while maintaining a subtle, elegant, tech-forward Coplero aesthetic. Format must be vertical (A4 or 4:5 ratio), highly readable and professional.

Absolute rules (must follow)
- Do NOT invent any data, names, amounts, or dates beyond what is provided.
- Do NOT distort text or reduce readability.
- Do NOT use decorative icons as bullet points.
- Keep all text perfectly crisp, aligned, and professional.
- The document must clearly look like a valid payment receipt.

Background & style
- Use a very subtle Coplero-style gradient (soft indigo / blue tones), extremely low opacity so it does NOT interfere with readability.
- Main background should remain clean, light, and document-like (white or very light gray).
- Optional: very soft grain texture, minimal.
- Use thin dividers and subtle lines to separate sections.

Typography & layout
- Typography: clean geometric sans-serif (Inter / SF Pro / Helvetica-like).
- Hierarchy: Small header label → Large title → Structured information blocks → Highlighted total amount → Signature area.
- Use a structured grid similar to a professional invoice.
- Left aligned layout with strong spacing and margins.
- Use boxed sections or subtle separators for clarity.

Branding
- Include the COPLERO logo (LogoYTituloNegro.png — black logo on light background) in the top-right corner (as provided).
- Do NOT overuse branding — keep it minimal and professional.
- Include the signature image of Juan Gutierrez in the signature section.

UI design guidance
- The layout should resemble a professional receipt / invoice, a legal acknowledgment document, clean and trustworthy.
- Use a highlighted box or emphasis style for the total amount paid.
- Include a clear signature section at the bottom.

Exact text to include (Spanish)
[INSERTAR TEXTO EXACTO PROPORCIONADO POR EL CLIENTE]
Code Agent Prompt (para Claude / GPT generar nuevo HTML)
Prompt para agente de código (Claude/GPT):
Create a premium vertical payment receipt HTML page (A4/4:5 ratio, 800×1000px max-width) for COPLERO, an AI content production company from Argentina.

VISUAL IDENTITY (MUST FOLLOW):
- Background: white (#FFFFFF) or very light gray (#F5F5F7), with very subtle gradient: linear-gradient(135deg, rgba(0,27,102,0.06) 0%, rgba(23,24,255,0.04) 100%)
- Typography: Inter / SF Pro / Helvetica Neue (clean geometric sans-serif)
- Brand colors: #001B66 (primary blue), #1718FF (electric blue), #1A1A1A (text), #E0E0E0 (dividers)
- Logo: Use LogoYTituloNegro.png (black logo + text "coplero") in top-right corner only, minimal branding
- Include Juan Gutierrez signature image in signature section

LAYOUT REQUIREMENTS:
- Left-aligned, structured grid like a professional invoice
- Thin dividers (1px solid #E0E0E0) between sections
- Boxed sections with subtle borders (1px solid #E0E0E0, 6px border-radius)
- Highlighted total box: background rgba(23,24,255,0.08), border 1px solid #1718FF, centered text
- Clear signature area at bottom right with signature image
- Strong spacing and margins (generous whitespace)

HIERARCHY:
1. Small header label (uppercase, 0.7rem, letter-spacing 0.2em, #555)
2. Large title (1.5rem, font-weight 700, #001B66, uppercase)
3. Structured information blocks (0.9rem, #1A1A1A)
4. Highlighted total amount (2rem, font-weight 700, #001B66)
5. Signature area (image + name, 0.8rem, #555)

ABSOLUTE RULES:
- Do NOT invent any data beyond what is provided below
- Keep all text crisp, aligned, perfectly readable
- Do NOT use decorative icons
- The document MUST look like a valid, professional receipt

Exact text to include (Spanish):
[INSERTAR TEXTO EXACTO PROPORCIONADO POR EL CLIENTE]

Output: Complete HTML file with inline CSS. No external dependencies except LogoYTituloNegro.png logo.

Template 2 — Infografía Estrategia de Contenido

Horizontal · 16:9 · Fondo Oscuro
LOGO PARA ESTE TEMPLATE: Usar LogoYTituloBlanco.png (Logo + Título Blanco) porque el fondo es azul primario oscuro (#001B66).
Si se usa un isotipo solo (pequeño), usar isotipoBlanco.png.
Visual Spec (para agente de código)
PropiedadValor
FormatoHorizontal — 16:9 (1920×1080px o 1280×720px)
BackgroundGradiente "ink cloud" sobre #001B66: radial-gradient(ellipse at 30% 50%, rgba(23,24,255,0.25) 0%, rgba(0,27,102,0.15) 40%, rgba(100,0,200,0.1) 70%, transparent 100%)
TexturaGrain texture ligero (SVG feTurbulence, opacity 0.05-0.08) sobre todo el fondo
TypographyClean geometric sans-serif: Inter / SF Pro / Circular. Jerarquía: Very large title → Subtitle → Section headers → Content blocks
ColorsFondo: #001B66 · Cards: rgba(255,255,255,0.08) con thin white strokes · Texto: #FFFFFF · Acentos: #1718FF
LayoutLeft-aligned grid, generous spacing. Structured cards (dark semi-opaque, rounded corners, thin white border) para agrupar contenido. Separación visual entre Carruseles y Reels.
Bullet pointsSimple neutral markers ONLY: small round dots (•) or short dashes (–). NO icons, NO logos, NO symbols.
LogoLogoYTituloBlanco.png (fondo oscuro). Opcional: isotipoBlanco.png para elementos pequeños.
SpecialAgrupar ideas conceptualmente: eventos, producto, branding, experiencia. Micro-line opcional: "Estrategia · Producción · Contenido para redes sociales"
HTML/CSS Reference (código mínimo funcional)
HTML + CSS inline para infografía base (logo blanco sobre fondo oscuro)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    * { box-sizing: border-box; margin:0; padding:0; }
    body {
      font-family: 'Inter', 'SF Pro Display', 'Helvetica Neue', sans-serif;
      background: #001B66;
      background-image: radial-gradient(ellipse at 30% 50%, rgba(23,24,255,0.25) 0%, rgba(0,27,102,0.15) 40%, rgba(100,0,200,0.1) 70%, transparent 100%);
      color: #FFFFFF;
      width: 1920px;
      height: 1080px;
      padding: 60px;
      position: relative;
    }
    body::before {
      content: '';
      position: absolute; top:0; left:0; right:0; bottom:0;
      background-image: url("data:image/svg+xml,..."); /* feTurbulence grain */
      opacity: 0.05; pointer-events: none;
    }
    .label { font-size: 14px; text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255,0.6); }
    .title { font-size: 72px; font-weight: 800; letter-spacing: -2px; text-transform: uppercase; margin: 10px 0 5px; }
    .subtitle { font-size: 24px; color: rgba(255,255,255,0.8); margin-bottom: 40px; }
    .card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 16px;
    }
    .card h3 { font-size: 18px; text-transform: uppercase; letter-spacing: 2px; color: #1718FF; margin-bottom: 16px; }
    .card li { font-size: 18px; color: rgba(255,255,255,0.9); padding: 6px 0; list-style: none; }
    .card li::before { content: "•"; color: #1718FF; margin-right: 10px; }
    .logo { height: 50px; position: absolute; top: 60px; right: 60px; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .micro-line { font-size: 16px; color: rgba(255,255,255,0.5); letter-spacing: 2px; margin-top: 30px; text-align: center; }
  </style>
</head>
<body>
  <img src="/LogoYTituloBlanco.png" class="logo" alt="Coplero">
  <div class="label">Estrategia de Contenido</div>
  <div class="title">Plan de Contenidos – [MARCA]</div>
  <div class="subtitle">Ideas organizadas para redes sociales</div>

  <div class="grid">
    <div class="card">
      <h3>Carruseles</h3>
      <ul>
        <li>Idea 1</li>
        <li>Idea 2</li>
      </ul>
    </div>
    <div class="card">
      <h3>Reels</h3>
      <ul>
        <li>Idea 1</li>
        <li>Idea 2</li>
      </ul>
    </div>
  </div>

  <div class="micro-line">Estrategia · Producción · Contenido para redes sociales</div>
</body>
</html>
Image Gen Prompt (verbatim para agente imagen)
Prompt verbatim para IA image generation:
Create a premium, modern one-page content strategy infographic for a restaurant brand, matching COPLERO's visual identity using the reference style: organic blurred blue-indigo-purple gradient cloud, subtle film grain, minimal, elegant, tech-forward. The design must be highly readable with clean hierarchy in a 16:9 format.

This infographic should organize and structure content ideas for Vincles, making them clear, strategic, and easy to execute.

Absolute rules (must follow)
- Do NOT use logos, icons, or symbols as bullet points.
- Bullet points must be simple neutral markers only: small round dots (•), short dashes (–).
- Do NOT invent additional content beyond what is provided.
- Keep all text crisp and perfectly legible (no blur, no distortion).

Background & readability (Coplero style but readable)
- Use a Coplero-style gradient "ink cloud" background (deep indigo / purple with cyan edges), soft organic shape.
- Add light grain texture, but keep typography sharp.
- Ensure high contrast using semi-opaque dark cards with rounded corners and thin white strokes.

Typography & layout
- Typography: clean geometric sans-serif (Inter / SF Pro / Circular-like).
- Hierarchy: Very large title → Subtitle → Section headers → Content blocks.
- Left aligned grid, generous spacing, consistent margins.
- Use structured cards to group content.

Branding
- Include the COPLERO logo (LogoYTituloBlanco.png — white logo on dark background) as provided.
- No other logos, no icons as bullets.

UI design guidance
- Design the layout like a content planning board used by a creative agency.
- Organize ideas into clear strategic categories, not just lists.
- Use visual separation between:
  • Carruseles
  • Reels
- Additionally, group ideas conceptually when possible (eventos, producto, branding, experiencia).

Exact text to include (Spanish)
Top small label: "Estrategia de Contenido"
Main title (largest): "Plan de Contenidos – Vincles"
Subtitle: "Ideas organizadas para redes sociales"

Section card: "CARRUSELES"
• "Evento de noches de milonga"
• "El after office que querías pero no sabías que existía"
• "Banda en vivo"
• "Razones para elegir Vincles para reuniones"
• "Guía: los mejores momentos para visitar Vincles según lo que buscás"
• "1 de mayo – locro"
• "Así se ve Vincles hoy"
• "Distintas mesas, distintos momentos"

Section card: "REELS"
• "Razones para elegir Vincles para reuniones (beneficios)"
• "ASMR del plato del día + POV (definir plato)"
• "Cocina nivel 2 — fuego en el salón (definir plato)"
• "Top 3 tragos más raros de la carta"
• "Evento de cumpleaños 70 (apertura del techo)"
• "Invitación a la locriada del 1 de mayo"
• "Qué son las noches de milonga"
• "El plato que más se pide en la cena (definir plato)"

Optional improvement (very important for better results)
Ask the model to visually differentiate content types using subtle grouping or spacing, such as:
• eventos
• gastronomía
• experiencia del lugar

Design tone
Modern, minimal, strategic, agency-level presentation. Clean, organized, and easy to scan.

Optional micro-line (only if it fits cleanly):
"Estrategia · Producción · Contenido para redes sociales"
Code Agent Prompt (para Claude / GPT generar nuevo HTML)
Prompt para agente de código (Claude/GPT):
Create a premium 16:9 infographic HTML page (1920×1080px) for COPLERO, an AI content production company from Argentina. This is a content strategy board for a client brand.

VISUAL IDENTITY (MUST FOLLOW):
- Background: #001B66 with "ink cloud" gradient: radial-gradient(ellipse at 30% 50%, rgba(23,24,255,0.25) 0%, rgba(0,27,102,0.15) 40%, rgba(100,0,200,0.1) 70%, transparent 100%)
- Grain texture: SVG feTurbulence filter with opacity 0.05-0.08 overlay on entire background
- Typography: Inter / SF Pro / Circular (clean geometric sans-serif)
- Brand colors: #001B66 (base), #1718FF (accent), #FFFFFF (text), rgba(255,255,255,0.08) (cards)
- Logo: Use LogoYTituloBlanco.png (white logo + text "coplero") for dark backgrounds. For small elements use isotipoBlanco.png (white sun icon only).
- Cards: semi-opaque dark (rgba(255,255,255,0.08)), rounded corners (12px), thin white strokes (1px solid rgba(255,255,255,0.2))

LAYOUT REQUIREMENTS:
- 16:9 format (1920×1080px or scale proportionally)
- Left-aligned grid with generous spacing and consistent margins
- Structured cards to group content (Carruseles vs Reels clearly separated)
- Visual grouping by concept: eventos, gastronomía, experiencia del lugar
- Hierarchy: Very large title (72px, font-weight 800, uppercase, letter-spacing -2px) → Subtitle (24px, rgba white 0.8) → Section headers (18px, uppercase, #1718FF, letter-spacing 2px) → Content blocks (18px, rgba white 0.9)

BULLET POINTS (CRITICAL):
- Simple neutral markers ONLY: small round dots (•) or short dashes (–)
- NO icons, NO logos, NO symbols as bullets
- Use CSS ::before with content: "•" and color: #1718FF

OPTIONAL:
- Micro-line at bottom: "Estrategia · Producción · Contenido para redes sociales" (16px, rgba white 0.5, letter-spacing 2px, centered)
- LogoYTituloBlanco.png positioned top-right (height: 50px)

ABSOLUTE RULES:
- Do NOT invent content beyond what is provided below
- Keep all text crisp and perfectly legible (no blur, no distortion)
- High contrast: dark cards on dark gradient background

Exact text to include (Spanish):
Top small label: "Estrategia de Contenido"
Main title (largest): "Plan de Contenidos – [MARCA_CLIENTE]"
Subtitle: "Ideas organizadas para redes sociales"

Section card: "CARRUSELES"
[INSERTAR LISTA DE IDEAS]

Section card: "REELS"
[INSERTAR LISTA DE IDEAS]

Output: Complete HTML file with inline CSS. No external dependencies. Include grain texture as inline SVG filter. Logo images: /LogoYTituloBlanco.png and /isotipoBlanco.png.

Template 3 — Propuesta Cobertura de Evento

Horizontal · 16:9 · Fondo Oscuro
LOGO PARA ESTE TEMPLATE: Usar LogoYTituloBlanco.png (Logo + Título Blanco) porque el fondo es azul primario oscuro (#001B66).
En el footer también puede usarse isotipoBlanco.png como elemento pequeño junto al texto "COPLERO AI".
Visual Spec (para agente de código)
PropiedadValor
FormatoHorizontal — 16:9 (1920×1080px o 1280×720px)
BackgroundGradiente "ink cloud" sobre #001B66: radial-gradient(ellipse at 30% 50%, rgba(23,24,255,0.25) 0%, rgba(0,27,102,0.15) 40%, rgba(100,0,200,0.1) 70%, transparent 100%). Título principal con overlay más oscuro para legibilidad garantizada.
TexturaGrain texture ligero (SVG feTurbulence, opacity 0.05-0.08)
TypographyClean geometric sans-serif: Inter / SF Pro / Circular. Jerarquía: Very large bold title → Medium subtitle → Bold section headers → Regular body
ColorsFondo: #001B66 · Panels: semi-opaque dark (rgba(255,255,255,0.08)) con rounded corners y thin white strokes · Texto: #FFFFFF · Acentos: #1718FF
LayoutLeft-aligned grid, generous spacing. Múltiples sección cards apiladas verticalmente. Logo en header-right o footer-left. Info de contacto clara.
Bullet pointsSimple neutral markers ONLY: small round dots (•), short dashes (–). NO icons, NO logos, NO brand marks como bullets.
LogoLogoYTituloBlanco.png en header-right (fondo oscuro). En footer: texto "COPLERO AI" + isotipoBlanco.png pequeño.
SpecialInvestment card destacada (grande, muy visible). Glow accents o separadores sutiles para secciones importantes como deliverables e inversión. Footer: "Coplero AI", web, contacto.
HTML/CSS Reference (código mínimo funcional)
HTML + CSS inline para propuesta base (logo blanco sobre fondo oscuro)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    * { box-sizing: border-box; margin:0; padding:0; }
    body {
      font-family: 'Inter', 'SF Pro Display', 'Helvetica Neue', sans-serif;
      background: #001B66;
      background-image: radial-gradient(ellipse at 30% 50%, rgba(23,24,255,0.25) 0%, rgba(0,27,102,0.15) 40%, rgba(100,0,200,0.1) 70%, transparent 100%);
      color: #FFFFFF;
      width: 1920px;
      height: 1080px;
      padding: 60px;
      position: relative;
    }
    .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }
    .header-info { max-width: 70%; }
    .label { font-size: 14px; text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255,0.6); }
    .title { font-size: 80px; font-weight: 800; letter-spacing: -3px; text-transform: uppercase; margin: 10px 0; }
    .subtitle { font-size: 28px; color: rgba(255,255,255,0.8); }
    .logo { height: 50px; }
    .card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 14px;
    }
    .card h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: #1718FF; margin-bottom: 12px; }
    .card li { font-size: 16px; color: rgba(255,255,255,0.9); padding: 5px 0; list-style: none; }
    .card li::before { content: "•"; color: #1718FF; margin-right: 8px; }
    .investment-card {
      background: rgba(23,24,255,0.15);
      border: 2px solid #1718FF;
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      margin: 20px 0;
    }
    .investment-label { font-size: 14px; text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255,0.6); }
    .investment-amount { font-size: 48px; font-weight: 800; color: #FFFFFF; margin: 8px 0; }
    .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); }
    .footer-brand { font-size: 18px; font-weight: 600; }
    .footer-brand img { height: 24px; vertical-align: middle; margin-right: 8px; }
    .footer-contact { font-size: 14px; color: rgba(255,255,255,0.7); text-align: right; }
  </style>
</head>
<body>
  <div class="header">
    <div class="header-info">
      <div class="label">Propuesta de Cobertura Audiovisual</div>
      <div class="title">Cobertura Audiovisual de Presentación</div>
      <div class="subtitle">[INSTITUCIÓN] · Evento del [FECHA]</div>
    </div>
    <img src="/LogoYTituloBlanco.png" class="logo" alt="Coplero">
  </div>

  <div class="card">
    <h3>Incluye</h3>
    <ul>
      <li>Video Aftermovie del evento</li>
      <li>Video Reel para redes sociales</li>
      <li>Cobertura fotográfica completa</li>
    </ul>
  </div>

  <div class="investment-card">
    <div class="investment-label">INVERSIÓN</div>
    <div class="investment-amount">$XX.000 ARS por alumno</div>
  </div>

  <div class="footer">
    <div class="footer-brand">
      <img src="/isotipoBlanco.png" alt=""> COPLERO AI
    </div>
    <div class="footer-contact">
      🌐 www.coplero.com<br>
      📲 Contacto: +54 9 387 560 1433
    </div>
  </div>
</body>
</html>
Image Gen Prompt (verbatim para agente imagen)
Prompt verbatim para IA image generation:
Create a premium, modern one-page event coverage proposal graphic for an audiovisual service, matching COPLERO's visual identity using the reference style: organic blurred blue-indigo-purple gradient cloud, subtle film grain, minimal, elegant, tech-forward. The design must be highly readable with clean hierarchy in 16:9 format.

Absolute rules (must follow)

Do NOT use the COPLERO logo, icon, spark symbol, or any brand mark as bullet points or list markers.

Bullet points must be simple neutral markers only: small round dots (•), short dashes (–), or minimal generic circles.

Do NOT invent contact details beyond the ones explicitly provided.

Keep all text crisp and perfectly legible (no blur, no distortion, no weird letter shapes).

Background & readability (Coplero style but readable)

Use a Coplero-style gradient "ink cloud" background (deep indigo / purple with cyan edges), soft organic shape.

Add light grain texture, but keep typography sharp.

Ensure high contrast by placing text inside semi-opaque dark panels/cards with rounded corners and thin white strokes.

Main title area must have a darker overlay behind it to guarantee readability.

Typography & layout

Typography: clean geometric sans-serif (Inter / SF Pro / Circular-like).

Hierarchy: very large bold title, medium subtitle, bold section headers, regular body.

Left aligned grid, generous spacing, consistent margins.

Use multiple horizontal section cards arranged vertically to organize the information.

Branding

Include the COPLERO logo (LogoYTituloBlanco.png — white logo on dark background) in the header-right or footer-left (as provided).

No other logos, no icons as bullets.

UI design guidance

Design the layout like a modern creative agency proposal slide.

Each section must be contained inside structured cards to make the information easy to scan.

Maintain strong visual hierarchy and balanced whitespace.

Use subtle glow accents or separators to highlight important sections like the investment and deliverables.

Exact text to include (Spanish)

Top small label:
"Propuesta de Cobertura Audiovisual"

Main title (largest):
"Cobertura Audiovisual de Presentación"

Subtitle:
"Colegio Américo Vespucio · Evento del 18 de marzo"

Intro description card:

"Cobertura profesional de la presentación y actividades posteriores, registrando los momentos más importantes del evento con contenido audiovisual de alta calidad."

Section card:
"INCLUYE"

Subsection:

"🎥 Video Aftermovie del evento"

• "1 video en formato horizontal"
• "Estilo aftermovie cinematográfico"
• "Resumen de los mejores momentos de la presentación"

Subsection:

"📱 Video Reel para redes sociales"

• "1 video en formato vertical"
• "Edición dinámica con efectos especiales potenciados con IA"
• "Ideal para compartir en Instagram, TikTok y redes sociales"

Subsection:

"📸 Cobertura fotográfica completa"

• "Fotografías ilimitadas durante todo el evento"
• "Registro de todos los momentos importantes"

Section card:
"📍 Cobertura de actividades"

• "Presentación principal"
• "Foto grupal oficial"
• "Caminata y festejo en el Monumento a Güemes"

Section card:
"💻 Entrega del material"

• "Todo el contenido se entrega en formato digital"

Large highlighted investment card (very visible):

"INVERSIÓN"

"$20.000 ARS por alumno"

Footer section:

"PRODUCE"

"COPLERO AI"

"🌐 www.coplero.com"

"📲 Contacto: +54 9 387 560 1433"

Footer small line:

"COPLERO | Agencia Productora de Contenido"

Optional micro-line (only if it fits cleanly):

"Producción audiovisual · Edición profesional · Contenido para redes sociales"
Code Agent Prompt (para Claude / GPT generar nuevo HTML)
Prompt para agente de código (Claude/GPT):
Create a premium 16:9 event proposal HTML page (1920×1080px) for COPLERO, an AI content production company from Argentina. This is a coverage proposal for an audiovisual event.

VISUAL IDENTITY (MUST FOLLOW):
- Background: #001B66 with "ink cloud" gradient: radial-gradient(ellipse at 30% 50%, rgba(23,24,255,0.25) 0%, rgba(0,27,102,0.15) 40%, rgba(100,0,200,0.1) 70%, transparent 100%)
- Main title area: darker overlay behind title to guarantee readability (rgba(0,0,0,0.3) or similar)
- Grain texture: SVG feTurbulence filter with opacity 0.05-0.08
- Typography: Inter / SF Pro / Circular (clean geometric sans-serif)
- Brand colors: #001B66 (base), #1718FF (accent), #FFFFFF (text)
- Logo: Use LogoYTituloBlanco.png (white logo + text "coplero") in header-right. For footer use isotipoBlanco.png (white sun icon only) next to "COPLERO AI" text.
- Cards/panels: semi-opaque dark (rgba(255,255,255,0.08)), rounded corners (12px), thin white strokes (1px solid rgba(255,255,255,0.2))
- NO logos/icons as bullet points. Use small round dots (•) only.

LAYOUT REQUIREMENTS:
- 16:9 format (1920×1080px or scale proportionally)
- Left-aligned grid, generous spacing, consistent margins
- Multiple horizontal section cards arranged vertically
- Structured cards for: Incluye (with subsections), Cobertura de actividades, Entrega del material
- Large highlighted investment card: background rgba(23,24,255,0.15), border 2px solid #1718FF, centered text, very visible
- Footer with: "COPLERO AI" (with isotipoBlanco.png), "🌐 www.coplero.com", "📲 Contacto: +54 9 387 560 1433"

HIERARCHY:
1. Small label (14px, uppercase, letter-spacing 3px, rgba white 0.6)
2. Very large bold title (80px, font-weight 800, letter-spacing -3px, uppercase)
3. Medium subtitle (28px, rgba white 0.8)
4. Bold section headers (16px, uppercase, letter-spacing 2px, #1718FF)
5. Regular body (16px, rgba white 0.9)

BULLET POINTS (CRITICAL):
- Simple neutral markers ONLY: small round dots (•) or short dashes (–)
- NO icons, NO logos, NO brand marks as bullets
- Use CSS ::before with content: "•" and color: #1718FF
- Subsections can use emoji in the title (🎥, 📱, 📸) but NOT in bullet points

SPECIAL SECTIONS:
- "INVERSIÓN" card: Must be the most visually prominent element. Large amount text (48px, font-weight 800)
- Use subtle glow accents or separators for deliverables and investment sections

ABSOLUTE RULES:
- Do NOT invent contact details beyond what is provided
- Keep all text crisp and perfectly legible (no blur, no distortion)
- High contrast: dark cards on dark gradient background
- No COPLERO logo/icon/symbol as bullet points

Exact text to include (Spanish):
[INSERTAR TEXTO EXACTO DEL PROMPT DE IMAGEN ARRIBA, SECCIÓN "Exact text to include"]

Output: Complete HTML file with inline CSS. No external dependencies. Include grain texture as inline SVG filter. Logo images: /LogoYTituloBlanco.png and /isotipoBlanco.png.
6 · Recursos Descargables
Logos (4 archivos)
LogoYTituloBlanco.png (fondo oscuro)
LogoYTituloNegro.png (fondo claro)
isotipoBlanco.png (sol blanco)
isotipoNegro.png (sol negro)
TODO:USER
WhatsApp: ✓ 5493875601433
Redes: ✓ Instagram @copleroai, coplero.com
OG Image: imagen 1200×630px para preview de links
(aparece al compartir link en WhatsApp/IG/FB)
Stack Técnico
Vite ^5.4 · GSAP ^3.12
Lenis ^1.1 · Vanilla JS
CSS moderno (layers, clamp)