<!DOCTYPE html>

<head>

<title>TRIB3 - Reporte de Crecimiento Q2 2025</title>

<style>

/* --- Brand Colors --- */

:root {

--dark-grey: #1b1f21;

--light-grey: #ecebe8;

--copper: #bd7f36;

--copper-light: #d8a562;

--mid-grey: #374151;

}

body {

font-family: 'Poppins', sans-serif;

background-color: var(--dark-grey);

color: var(--light-grey);

}

.main-title {

font-weight: 900;

letter-spacing: -0.05em;

}

.kpi-card {

background-color: rgba(255, 255, 255, 0.05);

border: 1px solid var(--mid-grey);

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.kpi-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(189, 127, 54, 0.1);

}

.kpi-value {

color: #FFFFFF;

font-weight: 900;

text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 20px rgba(189, 127, 54, 0.4);

}

.kpi-story {

font-size: 0.8rem;

color: #9CA3AF;

}

.tab-button {

transition: all 0.3s ease;

border-bottom: 3px solid transparent;

padding-bottom: 8px;

}

.tab-button.active {

color: var(--copper);

border-bottom-color: var(--copper);

}

.tab-button:not(.active):hover {

color: var(--light-grey);

}

.chart-container {

background-color: rgba(255, 255, 255, 0.05);

border: 1px solid var(--mid-grey);

padding: 1.5rem;

border-radius: 0.75rem;

}

.action-card {

background-color: rgba(255, 255, 255, 0.05);

border: 1px solid var(--mid-grey);

border-left: 4px solid var(--copper);

transition: all 0.3s ease;

}

.action-card:hover {

border-color: var(--copper);

transform: scale(1.02);

}

.story-card {

background-color: rgba(255, 255, 255, 0.05);

border: 1px solid var(--mid-grey);

display: flex;

flex-direction: column;

justify-content: center;

}

.impact-card {

background-color: var(--mid-grey);

}

</style>

</head>

<h1 class="text-2xl md:text-3xl font-light text-gray-300">Reporte de Crecimiento y Estrategia</h1>

<p class="text-lg md:text-xl font-semibold text-[var(--copper)]">Q2 2025: La Transformación</p>

</header>

<button id="tab-resumen" class="tab-button active text-lg font-semibold py-3 px-4 md:px-6" onclick="showTab('resumen')">Dashboard de Logros</button>

<button id="tab-impacto" class="tab-button text-lg font-semibold py-3 px-4 md:px-6" onclick="showTab('impacto')">Análisis de Impacto</button>

<button id="tab-competencia" class="tab-button text-lg font-semibold py-3 px-4 md:px-6" onclick="showTab('competencia')">Análisis Competitivo</button>

<button id="tab-plan" class="tab-button text-lg font-semibold py-3 px-4 md:px-6" onclick="showTab('plan')">Plan de Acción</button>

</div>

<main>

<h3 class="text-2xl font-bold mb-6 text-center text-[var(--light-grey)]">La Historia de Nuestro Trimestre</h3>

</div>

<h4 class="font-bold text-lg text-white">Abril: El Análisis</h4>

<p class="text-gray-400 text-sm">Establecimos la base, analizamos la oportunidad y diseñamos la nueva estrategia de contenido.</p>

</div>

</div>

<h4 class="font-bold text-lg text-white">Mayo: La Explosión</h4>

<p class="text-gray-400 text-sm">Ejecutamos la estrategia, y la tribu respondió con un crecimiento masivo en la participación.</p>

</div>

</div>

<h4 class="font-bold text-lg text-white">Junio: La Consolidación</h4>

<p class="text-gray-400 text-sm">Rompimos récords de alcance, duplicando la visibilidad y consolidando una alta interacción.</p>

</div>

</section>

<h3 class="text-2xl font-bold mb-6 text-center text-[var(--light-grey)]">Nuestros Logros en Números</h3>

<p class="text-gray-400 text-sm uppercase tracking-wider">Crecimiento de la Tribu</p>

<p class="kpi-story">Nuevos seguidores en el trimestre</p>

</div>

<p class="text-gray-400 text-sm uppercase tracking-wider">Visibilidad Disparada</p>

<p class="kpi-story">De 41k a 86k impresiones/mes</p>

</div>

<p class="text-gray-400 text-sm uppercase tracking-wider">Interacción Revitalizada</p>

<p class="kpi-story">De 156 a 485 interacciones/mes</p>

</div>

<p class="text-gray-400 text-sm uppercase tracking-wider">Reels Imparables</p>

<p class="kpi-story">Interacciones en nuestro formato estrella</p>

</div>

</section>

<h3 class="text-2xl font-bold mb-6 text-center text-[var(--light-grey)]">Evolución Gráfica del Trimestre</h3>

</div>

</div>

</section>

<h3 class="text-2xl font-bold mb-6 text-center text-[var(--light-grey)]">Publicaciones Estrella del Trimestre</h3>

<p class="text-sm text-[var(--copper-light)] font-semibold">Reel • Junio</p>

<p class="text-white font-semibold mt-1">"Respirar juntas. Movernos con intención..."</p>

<div>

<p class="text-xs text-gray-400">Interacciones</p>

</div>

<div>

<p class="text-xs text-gray-400">Impresiones</p>

</div>

<p class="text-sm font-bold text-[var(--copper-light)] mb-1">¿Por qué funcionó?</p>

<p class="text-xs text-gray-300">Conectó con la emoción y el valor central de la "tribu". El formato Reel y el enfoque en la comunidad generaron una autenticidad que disparó la interacción.</p>

</div>

<p class="text-white font-semibold mt-1">"Spoiler alert: más que cosas, lleva tus ganas..."</p>

<div>

<p class="text-xs text-gray-400">Interacciones</p>

</div>

<div>

<p class="text-xs text-gray-400">Impresiones</p>

</div>

<p class="text-sm font-bold text-[var(--copper-light)] mb-1">¿Por qué funcionó?</p>

<p class="text-xs text-gray-300">Rompió barreras de entrada con un mensaje inclusivo y motivacional. Habló directamente a la mentalidad del cliente potencial, no solo al cuerpo.</p>

</div>

<p class="text-white font-semibold mt-1">"Dale con calma o dale con todo..."</p>

<div>

<p class="text-xs text-gray-400">Interacciones</p>

</div>

<div>

<p class="text-xs text-gray-400">Impresiones</p>

</div>

<p class="text-sm font-bold text-[var(--copper-light)] mb-1">¿Por qué funcionó?</p>

<p class="text-xs text-gray-300">Validó todos los niveles de esfuerzo, haciendo que la audiencia se sintiera aceptada sin importar su condición. El mensaje "a tu manera" fue clave.</p>

</div>

</section>

</div>

<h3 class="text-2xl font-bold mb-2 text-center text-[var(--light-grey)]">Análisis de Impacto: El Antes y Después</h3>

<p class="text-center text-gray-400 mb-8 max-w-3xl mx-auto">Para medir el impacto de nuestra gestión (iniciada el 21 de Abril), comparamos el rendimiento de los meses anteriores con nuestro primer trimestre. Los datos muestran una clara inflexión y una trayectoria de crecimiento acelerado.</p>

</div>

</div>

<h4 class="font-bold text-lg text-white mb-2 text-center">Análisis Cualitativo: Cambio de Estrategia</h4>

<div>

<p class="font-semibold text-[var(--copper-light)]">Estrategia Anterior (Feb-Mar)</p>

<p class="text-sm text-gray-300 mt-2">El contenido se apoyaba fuertemente en memes y temas de humor (#girlmath, chismes). Esto generaba picos de interacción altos pero volátiles y de baja calidad, desconectados del valor de la marca TRIB3.</p>

</div>

<p class="font-semibold text-[var(--copper-light)]">Nuestra Estrategia (Abr-Jun)</p>

<p class="text-sm text-gray-300 mt-2">Viramos hacia un contenido centrado en la comunidad, la experiencia en el estudio y los valores de la marca. Aunque las interacciones iniciales se ajustaron, ahora son más estables y provienen de una audiencia más comprometida y alineada con TRIB3.</p>

</div>

<h3 class="text-2xl font-bold mb-6 text-center text-[var(--light-grey)]">Análisis Competitivo: ¿Qué podemos aprender?</h3>

<h4 class="text-xl font-bold text-white mb-2">CostaFit (@costafitpa)</h4>

<p class="text-sm text-gray-400 mb-4">Estrategia: <span class="font-semibold text-white">Calidad sobre Cantidad.</span></p>

<div>

<p class="text-xs uppercase">Interacciones / Post</p>

</div>

<div>

<p class="text-xs uppercase">Comentarios / Post</p>

</div>

<p class="text-sm font-bold text-[var(--copper-light)] mb-1">Clave de su éxito:</p>

<p class="text-sm text-gray-300">Con muy poco contenido (3 publicaciones en Junio), logran una interacción altísima. Esto sugiere que sus posts son eventos de alto impacto que generan mucha conversación.</p>

</div>

<h4 class="text-xl font-bold text-white mb-2">BE STUDIO (@belagree)</h4>

<p class="text-sm text-gray-400 mb-4">Estrategia: <span class="font-semibold text-white">Dominio del formato Reel.</span></p>

<div>

<p class="text-xs uppercase">"Me Gusta" / Post</p>

</div>

<div>

<p class="text-xs uppercase">Comentarios / Post</p>

</div>

<p class="text-sm font-bold text-[var(--copper-light)] mb-1">Clave de su éxito:</p>

<p class="text-sm text-gray-300">Apuestan fuerte por los Reels (5 de 6 publicaciones). Su alto promedio de "me gusta" y comentarios indica que han perfeccionado un estilo de video que resuena con su audiencia.</p>

</div>

<h3 class="text-2xl font-bold mb-6 text-center text-[var(--light-grey)]">Aprendizajes para TRIB3</h3>

<h4 class="font-semibold text-white mb-2">Crear Posts "Evento"</h4>

<p class="text-sm text-gray-400">Planificar un post mensual de alto impacto (un reto, un testimonio especial) para generar picos de conversación como CostaFit.</p>

</div>

<h4 class="font-semibold text-white mb-2">Duplicar la Apuesta en Reels</h4>

<p class="text-sm text-gray-400">Aumentar la frecuencia y experimentar con formatos de Reels que muestren técnica y el "detrás de cámaras" de las clases, como BE STUDIO.</p>

</div>

<h4 class="font-semibold text-white mb-2">Fomentar la Conversación</h4>

<p class="text-sm text-gray-400">Terminar cada publicación con una pregunta abierta para invitar a la tribu a comentar, no solo a dar "me gusta".</p>

</div>

</div>

<h4 class="font-black text-xl text-white mb-4">Potenciar Contenido y Comunidad</h4>

<p class="font-semibold text-white">Más Reels, Más Energía</p>

<p class="text-sm text-gray-400">Aumentar a 3-4 Reels semanales enfocados en testimonios, energía y comunidad.</p>

</div>

<p class="font-semibold text-white">Celebrar a la Tribu</p>

<p class="text-sm text-gray-400">Crear un post semanal "Miembro/Coach de la Semana" para fomentar pertenencia.</p>

</div>

</div>

<h4 class="font-black text-xl text-white mb-4">Optimizar para la Conversión</h4>

<p class="font-semibold text-white">Llamados a la Acción (CTAs)</p>

<p class="text-sm text-gray-400">Incluir CTAs directos en los posts para guiar a los usuarios a reservar o comprar.</p>

</div>

<p class="font-semibold text-white">Promoción Activa de Packs</p>

<p class="text-sm text-gray-400">Usar el sticker de "Enlace" en Historias para promocionar los packs de clases de forma constante.</p>

</div>

</div>

<h4 class="font-black text-xl text-white mb-4">Acelerar el Crecimiento Futuro</h4>

<p class="font-semibold text-white">Introducir Publicidad Pagada</p>

<p class="text-sm text-gray-400">Asignar un presupuesto inicial para promocionar posts exitosos y acelerar el crecimiento.</p>

</div>

<p class="font-semibold text-white">Optimizar Canales</p>

<p class="text-sm text-gray-400">Activar el cross-posting a Facebook para mantener presencia con mínimo esfuerzo.</p>

</div>

</main>

</div>

// Lógica para cambiar de pestaña

function showTab(tabName) {

document.querySelectorAll('[id^="content-"]').forEach(el => el.classList.add('hidden'));

document.querySelectorAll('[id^="tab-"]').forEach(el => el.classList.remove('active'));

document.getElementById(`content-${tabName}`).classList.remove('hidden');

document.getElementById(`tab-${tabName}`).classList.add('active');

}

// --- Configuración de Gráficos ---

const chartFontColor = '#9CA3AF';

const gridColor = '#374151';

const copperColor = '#bd7f36';

const copperColorTransparent = 'rgba(189, 127, 54, 0.2)';

const lightGreyColor = '#ecebe8';

const lightGreyColorTransparent = 'rgba(236, 235, 232, 0.6)';

// Datos del trimestre

const months = ['Abril', 'Mayo', 'Junio'];

const impressionsData = [41430, 57400, 86620];

const interactionsData = [156, 507, 485];

const reachData = [41430, 57400, 86620];

// Datos para el gráfico de impacto

const impactMonths = ['Feb', 'Mar', 'Abr', 'May', 'Jun'];

const impactImpressions = [64190, 64700, 41430, 57400, 86620];

const impactInteractions = [510, 834, 156, 507, 485];

const newFollowers = [141, 87, 64, 107, 82];

// Gráfico 1: Alcance (Trimestral)

const reachCtx = document.getElementById('reachChart').getContext('2d');

new Chart(reachCtx, {

type: 'bar',

data: {

labels: months,

datasets: [{

label: 'Alcance Mensual',

data: reachData,

backgroundColor: [

'rgba(236, 235, 232, 0.4)',

'rgba(236, 235, 232, 0.6)',

'rgba(236, 235, 232, 0.8)',

borderColor: lightGreyColor,

borderWidth: 1,

}, {

label: 'Tendencia de Alcance',

data: reachData,

type: 'line',

borderColor: copperColor,

tension: 0.4,

pointRadius: 2,

pointHoverRadius: 7,

pointBackgroundColor: copperColor

}]

options: {

responsive: true,

plugins: {

title: {

display: true,

text: 'Evolución del Alcance (Impresiones)',

color: lightGreyColor,

font: { size: 18, weight: '600' }

legend: {

display: true,

labels: { color: chartFontColor }

}

scales: {

y: {

grid: { color: gridColor },

ticks: { color: chartFontColor, font: { weight: '600' } }

x: {

grid: { display: false },

ticks: { color: chartFontColor, font: { weight: '600' } }

}

});

// Gráfico 2: Interacciones (Trimestral)

const performanceCtx = document.getElementById('performanceChart').getContext('2d');

new Chart(performanceCtx, {

type: 'bar',

data: {

labels: months,

datasets: [

{

label: 'Interacciones',

data: interactionsData,

backgroundColor: copperColor,

borderColor: copperColor,

borderWidth: 1,

order: 1

{

label: 'Tendencia de Interacción',

data: interactionsData,

type: 'line',

borderColor: lightGreyColor,

borderDash: [5, 5],

tension: 0.4,

pointRadius: 2,

pointHoverRadius: 7,

pointBackgroundColor: lightGreyColor,

order: 0

}

]

options: {

responsive: true,

plugins: {

title: {

display: true,

text: 'El Salto Trimestral en Interacción',

color: lightGreyColor,

font: { size: 18, weight: '600' }

legend: {

display: true,

labels: { color: chartFontColor }

}

scales: {

y: {

type: 'linear',

display: true,

position: 'left',

title: { display: true, text: 'Interacciones', color: chartFontColor },

grid: { color: gridColor },

ticks: { color: chartFontColor }

x: {

grid: { display: false },

ticks: { color: chartFontColor, font: { weight: '600' } }

}

});

// Gráfico 3: Impacto - Alcance y Nuevos Seguidores

const impactReachFollowersCtx = document.getElementById('impactReachFollowersChart').getContext('2d');

new Chart(impactReachFollowersCtx, {

type: 'bar',

data: {

labels: impactMonths,

datasets: [

{

label: 'Alcance (Impresiones)',

data: impactImpressions,

backgroundColor: (context) => {

const index = context.dataIndex;

return index < 2 ? 'rgba(156, 163, 175, 0.5)' : lightGreyColorTransparent;

borderColor: lightGreyColor,

borderWidth: 1,

yAxisID: 'y'

{

label: 'Nuevos Seguidores',

data: newFollowers,

type: 'line',

borderColor: copperColor,

tension: 0.4,

yAxisID: 'y1',

pointRadius: 3,

pointHoverRadius: 8,

pointBackgroundColor: copperColor

}

]

options: {

responsive: true,

plugins: {

title: {

display: true,

text: 'Impacto: Alcance vs. Crecimiento',

color: lightGreyColor,

font: { size: 18, weight: '600' }

legend: {

display: true,

labels: { color: chartFontColor }

tooltip: {

mode: 'index',

intersect: false

}

scales: {

y: {

type: 'linear',

display: true,

position: 'left',

title: { display: true, text: 'Impresiones', color: chartFontColor },

grid: { color: gridColor },

ticks: { color: chartFontColor }

y1: {

type: 'linear',

display: true,

position: 'right',

title: { display: true, text: 'Nuevos Seguidores', color: chartFontColor },

grid: { drawOnChartArea: false },

ticks: { color: chartFontColor }

x: {

grid: { display: false },

ticks: { color: chartFontColor, font: { weight: '600' } }

}

});

// Gráfico 4: Impacto - Alcance e Interacciones

const impactReachInteractionsCtx = document.getElementById('impactReachInteractionsChart').getContext('2d');

new Chart(impactReachInteractionsCtx, {

type: 'bar',

data: {

labels: impactMonths,

datasets: [

{

label: 'Alcance (Impresiones)',

data: impactImpressions,

backgroundColor: (context) => {

const index = context.dataIndex;

return index < 2 ? 'rgba(156, 163, 175, 0.5)' : lightGreyColorTransparent;

borderColor: lightGreyColor,

borderWidth: 1,

yAxisID: 'y'

{

label: 'Interacciones',

data: impactInteractions,

type: 'line',

borderColor: copperColor,

tension: 0.4,

yAxisID: 'y1',

pointRadius: 3,

pointHoverRadius: 8,

pointBackgroundColor: copperColor

}

]

options: {

responsive: true,

plugins: {

title: {

display: true,

text: 'Impacto: Alcance vs. Interacción',

color: lightGreyColor,

font: { size: 18, weight: '600' }

legend: {

display: true,

labels: { color: chartFontColor }

tooltip: {

mode: 'index',

intersect: false

}

scales: {

y: {

type: 'linear',

display: true,

position: 'left',

title: { display: true, text: 'Impresiones', color: chartFontColor },

grid: { color: gridColor },

ticks: { color: chartFontColor }

y1: {

type: 'linear',

display: true,

position: 'right',

title: { display: true, text: 'Interacciones', color: chartFontColor },

grid: { drawOnChartArea: false },

ticks: { color: chartFontColor }

x: {

grid: { display: false },

ticks: { color: chartFontColor, font: { weight: '600' } }

}

});

</script>

</body>

</html>