diagnostico+metodo en curso
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="18px" height="24px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
|
||||
viewBox="0 0 0.83 1.1"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Capa_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1823276664032">
|
||||
<path fill="#221728" d="M0.02 0.72c0.01,0.13 0.14,0.11 0.26,0.11 0,0.09 -0.02,0.27 0.14,0.27 0.06,0.01 0.11,-0.03 0.13,-0.08 0.02,-0.04 0.01,-0.14 0.01,-0.19 0.07,-0.01 0.15,0.02 0.21,-0.02 0.06,-0.04 0.06,-0.1 0.06,-0.19l-0.83 0 0.01 0 0.01 0.1zm0.4 0.21c0.02,0 0.04,0.01 0.04,0.04 0,0.02 -0.02,0.03 -0.04,0.03 -0.02,0 -0.03,-0.01 -0.03,-0.03 0,-0.03 0.01,-0.04 0.03,-0.04z"/>
|
||||
<path fill="#221728" fill-opacity="0.501961" d="M0.01 0.62l0.82 0 0 -0.51c0,-0.06 -0.04,-0.11 -0.1,-0.11l-0.34 0 -0.06 0.08c-0.01,0.01 -0.02,0.01 -0.02,0l-0.06 -0.08 -0.02 0 -0.06 0.08c-0.01,0.01 -0.01,0.01 -0.02,0l-0.06 -0.08c-0.04,0.02 -0.08,0.06 -0.08,0.11l0 0.51z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="24px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
|
||||
viewBox="0 0 1.21 1.21"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Capa_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1787408325232">
|
||||
<path fill="#221728" d="M0.88 0.19c0.15,-0.03 0.2,0.2 0.05,0.23 -0.15,0.02 -0.19,-0.19 -0.05,-0.23zm-0.36 0.11c-0.02,0.05 -0.06,0.11 -0.09,0.18 -0.02,0.06 -0.04,0.14 -0.05,0.2 0.05,0.01 0.08,0.03 0.1,0.05 0.04,0.03 0.04,0.06 0.05,0.1 0.14,-0.03 0.27,-0.07 0.38,-0.14 0.32,-0.15 0.34,-0.6 0.27,-0.66 -0.08,-0.06 -0.34,-0.01 -0.42,0.03 -0.09,0.05 -0.14,0.1 -0.2,0.17 -0.01,0.02 -0.03,0.05 -0.04,0.07z"/>
|
||||
<path fill="#221728" fill-opacity="0.501961" d="M0.18 0.94c0.09,-0.05 0.15,0.09 0.05,0.13 -0.15,0.05 -0.09,-0.11 -0.05,-0.13zm0.23 0.1c0.06,-0.22 -0.29,-0.39 -0.39,-0.06 -0.01,0.04 -0.03,0.15 -0.02,0.19 0.02,0.06 0.1,0.04 0.16,0.03 0.12,-0.01 0.22,-0.06 0.25,-0.16zm0.12 -0.21c0,0.06 -0.01,0.25 0.01,0.28 0.04,0.09 0.14,0.01 0.19,-0.02 0.25,-0.16 0.15,-0.09 0.18,-0.4 -0.11,0.07 -0.24,0.11 -0.38,0.14zm-0.15 -0.15c0.01,-0.06 0.03,-0.14 0.05,-0.2 0.03,-0.07 0.07,-0.13 0.09,-0.18 -0.08,0.03 -0.21,-0.02 -0.28,0.02 -0.05,0.02 -0.17,0.24 -0.18,0.26 -0.04,0.15 0.2,0.09 0.32,0.1z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="19px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
|
||||
viewBox="0 0 1.19 0.95"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Capa_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path fill="#221728" d="M0.23 0l0.13 0 0.12 0 0.12 0c0.03,0 0.05,0.03 0.05,0.06l0 0c0,0.03 -0.02,0.05 -0.05,0.05l-0.12 0 0 0.12 0.35 0c0.03,0 0.06,0.03 0.06,0.06l0 0.04 0 0.02 0 0.02c0,0.02 -0.02,0.04 -0.04,0.04l0 0c-0.03,0 -0.05,-0.02 -0.05,-0.04l0 -0.02 -0.32 0 -0.05 0 -0.01 0c-0.04,0 -0.06,-0.02 -0.06,-0.06l0 -0.18 -0.13 0c-0.03,0 -0.05,-0.02 -0.05,-0.05l0 0c0,-0.03 0.02,-0.06 0.05,-0.06zm-0.01 0.47l0.1 0c0.02,0 0.04,0.02 0.04,0.04l0 0.08 -0.18 0 0 -0.08c0,-0.02 0.02,-0.04 0.04,-0.04zm0.3 0l0.09 0c0.03,0 0.04,0.02 0.04,0.04l0 0.08 -0.17 0 0 -0.08c0,-0.02 0.02,-0.04 0.04,-0.04zm0.3 0l0.09 0c0.02,0 0.04,0.02 0.04,0.04l0 0.08 -0.17 0 0 -0.08c0,-0.02 0.01,-0.04 0.04,-0.04z"/>
|
||||
<path fill="#221728" fill-opacity="0.501961" d="M0.17 0.59l0.85 0c0.1,0 0.17,0.08 0.17,0.17l0 0.01c0,0.1 -0.07,0.18 -0.17,0.18l-0.85 0c-0.09,0 -0.17,-0.08 -0.17,-0.18l0 -0.01c0,-0.09 0.08,-0.17 0.17,-0.17zm0.07 0.12c0.03,0 0.06,0.02 0.06,0.06 0,0.03 -0.03,0.05 -0.06,0.05 -0.03,0 -0.06,-0.02 -0.06,-0.05 0,-0.04 0.03,-0.06 0.06,-0.06zm0.71 0c0.03,0 0.06,0.02 0.06,0.06 0,0.03 -0.03,0.05 -0.06,0.05 -0.03,0 -0.06,-0.02 -0.06,-0.05 0,-0.04 0.03,-0.06 0.06,-0.06zm-0.35 0c0.03,0 0.06,0.02 0.06,0.06 0,0.03 -0.03,0.05 -0.06,0.05 -0.03,0 -0.06,-0.02 -0.06,-0.05 0,-0.04 0.03,-0.06 0.06,-0.06z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="18px" height="24px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
|
||||
viewBox="0 0 1.32 1.78"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Capa_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1788081659888">
|
||||
<path fill="#221728" d="M0.28 0c0.18,0 0.36,0 0.54,0 0.05,0 0.14,0.05 0.17,0.08 0.08,0.09 0.16,0.18 0.23,0.26 0.13,0.15 0.1,0.13 0.1,0.33 0,0.28 0,0.55 0,0.83 0,0.15 -0.13,0.28 -0.28,0.28l-0.76 0c-0.15,0 -0.28,-0.13 -0.28,-0.28l0 -1.22c0,-0.15 0.13,-0.28 0.28,-0.28zm0.24 1.3c0.06,0.06 0.03,0.19 0.11,0.22 0.04,0.01 0.26,0 0.33,0 0.05,0 0.1,0 0.12,-0.04 0.08,-0.17 -0.27,-0.11 -0.36,-0.12 -0.05,-0.1 -0.04,-0.25 -0.16,-0.26 -0.1,-0.02 -0.14,0.07 -0.23,0.19 -0.02,0.02 -0.08,0.09 -0.09,0.11 -0.04,0.09 0.06,0.18 0.14,0.08l0.14 -0.18zm-0.29 -1.06l0.22 0c0.04,0 0.06,0.03 0.06,0.06 0,0.04 -0.02,0.06 -0.06,0.06l-0.22 0c-0.03,0 -0.06,-0.02 -0.06,-0.06 0,-0.03 0.03,-0.06 0.06,-0.06zm0 0.19l0.22 0c0.04,0 0.06,0.03 0.06,0.06 0,0.03 -0.02,0.06 -0.06,0.06l-0.22 0c-0.03,0 -0.06,-0.03 -0.06,-0.06 0,-0.03 0.03,-0.06 0.06,-0.06zm0.92 0.13l-0.32 0c-0.02,0 -0.04,-0.02 -0.04,-0.03l0 -0.36c0,-0.02 0.02,-0.02 0.03,-0.01l0.33 0.36c0.02,0.03 0.02,0.04 0,0.04z"/>
|
||||
<path fill="#221728" fill-opacity="0.501961" d="M0.52 1.3c0.06,0.06 0.03,0.19 0.11,0.22 0.04,0.01 0.26,0 0.33,0 0.05,0 0.1,0 0.12,-0.04 0.08,-0.17 -0.27,-0.11 -0.36,-0.12 -0.05,-0.1 -0.04,-0.25 -0.16,-0.26 -0.1,-0.02 -0.14,0.07 -0.23,0.19 -0.02,0.02 -0.08,0.09 -0.09,0.11 -0.04,0.09 0.06,0.18 0.14,0.08l0.14 -0.18zm-0.29 -1.06l0.22 0c0.04,0 0.06,0.03 0.06,0.06l0 0c0,0.04 -0.02,0.06 -0.06,0.06l-0.22 0c-0.03,0 -0.06,-0.02 -0.06,-0.06l0 0c0,-0.03 0.03,-0.06 0.06,-0.06zm0 0.19l0.22 0c0.04,0 0.06,0.03 0.06,0.06l0 0c0,0.03 -0.02,0.06 -0.06,0.06l-0.22 0c-0.03,0 -0.06,-0.03 -0.06,-0.06l0 0c0,-0.03 0.03,-0.06 0.06,-0.06z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="19px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
|
||||
viewBox="0 0 2.11 1.64"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Capa_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1788293282800">
|
||||
<path fill="#221728" d="M1.57 1.41c-0.21,0 -0.17,-0.1 -0.17,-0.35l0.48 0c0,0.34 0.04,0.35 -0.31,0.35zm-1.18 0c-0.2,0 -0.16,-0.1 -0.16,-0.35l0.48 0c0,0.34 0.04,0.35 -0.32,0.35zm0.96 -1.29c0,0.11 0.08,0.12 0.18,0.12 0.12,0 0.14,0.02 0.18,0.12 0.04,0.16 0.1,0.31 0.14,0.46 -0.13,0.01 -0.27,0 -0.4,0 -0.14,0 -0.27,-0.03 -0.28,0.12 -0.3,0 -0.21,0.01 -0.25,-0.06 -0.05,-0.08 -0.16,-0.06 -0.26,-0.06 -0.13,0 -0.27,0 -0.4,0 0.02,-0.08 0.15,-0.51 0.18,-0.55 0.07,-0.07 0.22,0.01 0.29,-0.07 0.07,-0.08 0.01,-0.2 -0.1,-0.2 -0.17,0 -0.24,0 -0.36,0.12 -0.07,0.07 -0.08,0.14 -0.11,0.24 -0.18,0.54 -0.16,0.43 -0.16,0.93 0,0.2 0.16,0.35 0.36,0.35 0.35,0 0.58,0.02 0.58,-0.46l0.23 0 0 0.11c0,0.2 0.16,0.35 0.36,0.35l0.22 0c0.2,0 0.36,-0.15 0.36,-0.35l0 -0.35c0,-0.12 -0.18,-0.73 -0.27,-0.83 -0.11,-0.11 -0.49,-0.18 -0.49,0.01z"/>
|
||||
<path fill="#221728" fill-opacity="0.501961" d="M1.57 1.41c0.35,0 0.31,-0.01 0.31,-0.35l-0.48 0c0,0.25 -0.04,0.35 0.17,0.35zm-1.18 0c0.36,0 0.32,-0.01 0.32,-0.35l-0.48 0c0,0.25 -0.04,0.35 0.16,0.35z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32px" height="46px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
|
||||
viewBox="0 0 4.12 5.95"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Capa_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path fill="#221728" d="M2.06 0c1.13,0 2.06,0.93 2.06,2.06l0 3.89 -0.15 0 0 -3.89c0,-1.05 -0.86,-1.92 -1.91,-1.92 -1.05,0 -1.92,0.87 -1.92,1.92l0 3.89 -0.14 0 0 -3.89c0,-1.13 0.93,-2.06 2.06,-2.06z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 821 B |
+80
-4
@@ -162,10 +162,86 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sección 4 -->
|
||||
<section id="inicio-section-4">
|
||||
<h2>Sección 4</h2>
|
||||
<p>Contenido pendiente de definir.</p>
|
||||
<!-- Sección 4: Metodología -->
|
||||
<section id="metodologia" class="metodologia-section">
|
||||
<div class="metodologia-header">
|
||||
<h2 class="metodologia-title">Método A&R</h2>
|
||||
<p class="metodologia-subtitle">Tu proceso paso a paso sin sorpresas</p>
|
||||
</div>
|
||||
|
||||
<div class="metodologia-grid">
|
||||
<!-- Paso 1: Contacto -->
|
||||
<div class="paso-item" data-paso="0">
|
||||
<div class="paso-arco">
|
||||
<span class="arco-svg" aria-hidden="true"></span>
|
||||
<span class="paso-icono icon-contacto" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="paso-info">
|
||||
<h3 class="paso-titulo">Contacto</h3>
|
||||
<p class="paso-subtitulo">Reunión de brief</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paso 2: Propuesta -->
|
||||
<div class="paso-item" data-paso="1">
|
||||
<div class="paso-arco">
|
||||
<span class="arco-svg" aria-hidden="true"></span>
|
||||
<span class="paso-icono icon-propuesta" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="paso-info">
|
||||
<h3 class="paso-titulo">Propuesta</h3>
|
||||
<p class="paso-subtitulo">Plan de trabajo</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paso 3: Diseño -->
|
||||
<div class="paso-item" data-paso="2">
|
||||
<div class="paso-arco">
|
||||
<span class="arco-svg" aria-hidden="true"></span>
|
||||
<span class="paso-icono icon-diseno" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="paso-info">
|
||||
<h3 class="paso-titulo">Diseño</h3>
|
||||
<p class="paso-subtitulo">Dirección de arte</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paso 4: Producción -->
|
||||
<div class="paso-item" data-paso="3">
|
||||
<div class="paso-arco">
|
||||
<span class="arco-svg" aria-hidden="true"></span>
|
||||
<span class="paso-icono icon-produccion" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="paso-info">
|
||||
<h3 class="paso-titulo">Producción</h3>
|
||||
<p class="paso-subtitulo">Desarrollo</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paso 5: Revisión -->
|
||||
<div class="paso-item" data-paso="4">
|
||||
<div class="paso-arco">
|
||||
<span class="arco-svg" aria-hidden="true"></span>
|
||||
<span class="paso-icono icon-revision" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="paso-info">
|
||||
<h3 class="paso-titulo">Revisión</h3>
|
||||
<p class="paso-subtitulo">Ajustes finales</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paso 6: Lanzamiento -->
|
||||
<div class="paso-item" data-paso="5">
|
||||
<div class="paso-arco">
|
||||
<span class="arco-svg" aria-hidden="true"></span>
|
||||
<span class="paso-icono icon-lanzamiento" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="paso-info">
|
||||
<h3 class="paso-titulo">Lanzamiento</h3>
|
||||
<p class="paso-subtitulo">Entrega</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sección 5 -->
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
+272
@@ -1430,3 +1430,275 @@ RESPONSIVE DIAGNÓSTICO
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user