diff --git a/assets/iconos/diseno.svg b/assets/iconos/diseno.svg new file mode 100644 index 0000000..bf6528b --- /dev/null +++ b/assets/iconos/diseno.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/iconos/lanzamiento.svg b/assets/iconos/lanzamiento.svg new file mode 100644 index 0000000..ffd26d6 --- /dev/null +++ b/assets/iconos/lanzamiento.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/iconos/produccion.svg b/assets/iconos/produccion.svg new file mode 100644 index 0000000..664355c --- /dev/null +++ b/assets/iconos/produccion.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/assets/iconos/propuesta.svg b/assets/iconos/propuesta.svg new file mode 100644 index 0000000..845d27c --- /dev/null +++ b/assets/iconos/propuesta.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/iconos/revision.svg b/assets/iconos/revision.svg new file mode 100644 index 0000000..bd0bb25 --- /dev/null +++ b/assets/iconos/revision.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/vectores/arco.svg b/assets/vectores/arco.svg new file mode 100644 index 0000000..1aa237c --- /dev/null +++ b/assets/vectores/arco.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/inicio.html b/inicio.html index 6362f09..69f7251 100644 --- a/inicio.html +++ b/inicio.html @@ -162,10 +162,86 @@ - -
-

Sección 4

-

Contenido pendiente de definir.

+ +
+
+

Método A&R

+

Tu proceso paso a paso sin sorpresas

+
+ +
+ +
+
+ + +
+
+

Contacto

+

Reunión de brief

+
+
+ + +
+
+ + +
+
+

Propuesta

+

Plan de trabajo

+
+
+ + +
+
+ + +
+
+

Diseño

+

Dirección de arte

+
+
+ + +
+
+ + +
+
+

Producción

+

Desarrollo

+
+
+ + +
+
+ + +
+
+

Revisión

+

Ajustes finales

+
+
+ + +
+
+ + +
+
+

Lanzamiento

+

Entrega

+
+
+
diff --git a/scripts/main.js b/scripts/main.js index 948684e..77f90b6 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -406,6 +406,80 @@ function reiniciarCuestionario() { renderizarPregunta(); } +/* ============================================ +ANIMACIÓN AUTOMÁTICA DE METODOLOGÍA +============================================ */ +function initMetodologiaAnimation() { + const section = document.getElementById('metodologia'); + if (!section) return; + + const pasos = section.querySelectorAll('.paso-item'); + if (pasos.length === 0) return; + + let pasoActual = 0; + let intervalo; + const DURACION_PASO = 2500; // 2.5 segundos por paso + + // Función para actualizar los estados + function actualizarEstados() { + pasos.forEach((paso, index) => { + // Remover todas las clases de estado + paso.classList.remove('active', 'previous'); + + // Calcular el índice del paso anterior (con loop) + const pasoAnterior = (pasoActual - 1 + pasos.length) % pasos.length; + + // Asignar estados + if (index === pasoActual) { + paso.classList.add('active'); + } else if (index === pasoAnterior) { + paso.classList.add('previous'); + } + }); + } + + // Función para avanzar al siguiente paso + function avanzarPaso() { + pasoActual = (pasoActual + 1) % pasos.length; + actualizarEstados(); + } + + // Función para iniciar la animación + function iniciarAnimacion() { + // Inicializar con el primer paso activo + actualizarEstados(); + + // Iniciar el intervalo + intervalo = setInterval(avanzarPaso, DURACION_PASO); + } + + // Función para detener la animación + function detenerAnimacion() { + clearInterval(intervalo); + } + + // IntersectionObserver para detectar cuando la sección es visible + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // La sección está visible: iniciar animación + iniciarAnimacion(); + } else { + // La sección no está visible: detener animación + detenerAnimacion(); + } + }); + }, { + threshold: 0.3 // Se activa cuando el 30% de la sección es visible + }); + + // Observar la sección + observer.observe(section); + + // Inicializar el primer estado (sin animación aún) + actualizarEstados(); +} + // Inicializar cuestionario al cargar la página document.addEventListener('DOMContentLoaded', () => { // Solo inicializar si estamos en la sección de diagnóstico @@ -415,4 +489,5 @@ document.addEventListener('DOMContentLoaded', () => { // Event listener al botón de reiniciar document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario); } + initMetodologiaAnimation(); }); \ No newline at end of file diff --git a/style/main.css b/style/main.css index 96dc482..95ea6db 100644 --- a/style/main.css +++ b/style/main.css @@ -1429,4 +1429,276 @@ RESPONSIVE DIAGNÓSTICO padding: var(--spacing-xs); font-size: 0.85rem; } +} +/* ============================================ +SECCIÓN METODOLOGÍA +============================================ */ +.metodologia-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +/* Header de la sección */ +.metodologia-header { + text-align: center; + max-width: 700px; + margin: 0 auto var(--spacing-lg); +} + +.metodologia-title { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(2rem, 4vw, 3rem); + color: var(--text-primary); + margin-bottom: var(--spacing-sm); + line-height: 1.15; +} + +.metodologia-subtitle { + font-family: var(--font-body); + font-size: 1.1rem; + color: var(--text-muted); + line-height: 1.6; +} + +/* Grid de pasos */ +.metodologia-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: var(--spacing-md); + max-width: 1400px; + margin: 0 auto; +} + +/* Cada paso */ +.paso-item { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + transition: all 0.5s ease; + opacity: 0.5; + transform: scale(0.95); +} + +/* Arco contenedor */ +.paso-arco { + position: relative; + width: 100%; + max-width: 120px; + height: 100px; + margin-bottom: var(--spacing-sm); + display: flex; + justify-content: center; + align-items: flex-end; +} + +.arco-svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + background-color: currentColor; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center top; + mask-position: center top; + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-image: url("../assets/vectores/arco.svg"); + mask-image: url("../assets/vectores/arco.svg"); + transition: all 0.5s ease; + filter: grayscale(100%) opacity(0.3); + color: var(--text-muted); +} + +.paso-icono { + position: absolute; + bottom: 10%; + left: 50%; + transform: translateX(-50%); + width: 40px; + height: 40px; + display: block; + background-color: currentColor; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; + transition: all 0.5s ease; + filter: grayscale(100%) opacity(0.4); + color: var(--text-muted); +} +.icon-contacto{ + -webkit-mask-image: url("../assets/iconos/contacto.svg"); + mask-image: url("../assets/iconos/contacto.svg"); +} +.icon-propuesta{ + -webkit-mask-image: url("../assets/iconos/propuesta.svg"); + mask-image: url("../assets/iconos/propuesta.svg"); +} +.icon-diseno{ + -webkit-mask-image: url("../assets/iconos/diseno.svg"); + mask-image: url("../assets/iconos/diseno.svg"); +} +.icon-produccion{ + -webkit-mask-image: url("../assets/iconos/produccion.svg"); + mask-image: url("../assets/iconos/produccion.svg"); +} +.icon-revision{ + -webkit-mask-image: url("../assets/iconos/revision.svg"); + mask-image: url("../assets/iconos/revision.svg"); +} +.icon-lanzamiento{ + -webkit-mask-image: url("../assets/iconos/lanzamiento.svg"); + mask-image: url("../assets/iconos/lanzamiento.svg"); +} + + +/* Información del paso */ +.paso-info { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.paso-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: 1.1rem; + color: var(--text-primary); + font-weight: 700; + transition: all 0.5s ease; +} + +.paso-subtitulo { + font-family: var(--font-body); + font-size: 0.85rem; + color: var(--text-muted); + transition: all 0.5s ease; +} + +/* ============================================ +ESTADOS DE ANIMACIÓN +============================================ */ + +/* Paso Activo (el que "avanza") */ +.paso-item.active { + opacity: 1; + transform: scale(1.05); +} + +.paso-item.active .arco-svg { + filter: grayscale(0%) opacity(1); + stroke: var(--brand-crimson); +} + +.paso-item.active .paso-icono { + filter: grayscale(0%) opacity(1); + transform: translateX(-50%) scale(1.1); + color: var(--brand-crimson); +} + +.paso-item.active .paso-titulo { + color: var(--brand-crimson); + font-weight: 700; +} + +.paso-item.active .paso-subtitulo { + color: var(--text-primary); + font-weight: 500; +} + +/* Paso Anterior (efecto de arrastre) */ +.paso-item.previous { + opacity: 0.75; + transform: scale(1); +} + +.paso-item.previous .arco-svg { + filter: grayscale(0%) opacity(0.7); + stroke: var(--brand-rose-muted); +} + +.paso-item.previous .paso-icono { + filter: grayscale(0%) opacity(0.8); +} + +.paso-item.previous .paso-titulo { + color: var(--brand-teal); +} + +.paso-item.previous .paso-subtitulo { + color: var(--text-muted); +} + +/* ============================================ +RESPONSIVE METODOLOGÍA +============================================ */ +@media (max-width: 1024px) { + .metodologia-grid { + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-md); + } +} + +@media (max-width: 768px) { + .metodologia-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .metodologia-grid { + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-sm); + } + + .metodologia-title { + font-size: 1.75rem; + } + + .metodologia-subtitle { + font-size: 1rem; + } + + .paso-arco { + max-width: 100px; + } + + .paso-icono { + width: 32px; + height: 32px; + } + + .paso-titulo { + font-size: 1rem; + } + + .paso-subtitulo { + font-size: 0.8rem; + } +} + +@media (max-width: 480px) { + .metodologia-grid { + grid-template-columns: 1fr; + max-width: 300px; + } +} + +/* Respetar preferencia de movimiento reducido */ +@media (prefers-reduced-motion: reduce) { + .paso-item { + transition: none; + } + + .arco-svg, + .paso-icono, + .paso-titulo, + .paso-subtitulo { + transition: none; + } } \ No newline at end of file