diff --git a/assets/clientes/1_1.png b/assets/clientes/1_1.png new file mode 100644 index 0000000..daa1969 Binary files /dev/null and b/assets/clientes/1_1.png differ diff --git a/assets/clientes/2_1.png b/assets/clientes/2_1.png new file mode 100644 index 0000000..3f66aaa Binary files /dev/null and b/assets/clientes/2_1.png differ diff --git a/assets/clientes/3_1.png b/assets/clientes/3_1.png new file mode 100644 index 0000000..f3aafc6 Binary files /dev/null and b/assets/clientes/3_1.png differ diff --git a/assets/clientes/4_1.png b/assets/clientes/4_1.png new file mode 100644 index 0000000..3ee017b Binary files /dev/null and b/assets/clientes/4_1.png differ diff --git a/assets/clientes/5_1.png b/assets/clientes/5_1.png new file mode 100644 index 0000000..4d6fbee Binary files /dev/null and b/assets/clientes/5_1.png differ diff --git a/assets/vectores/analytics.svg b/assets/vectores/analytics.svg new file mode 100644 index 0000000..de161ac --- /dev/null +++ b/assets/vectores/analytics.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/vectores/face.svg b/assets/vectores/face.svg new file mode 100644 index 0000000..53fdfa9 --- /dev/null +++ b/assets/vectores/face.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/assets/vectores/google.svg b/assets/vectores/google.svg new file mode 100644 index 0000000..6f67e2c --- /dev/null +++ b/assets/vectores/google.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/vectores/googleads.svg b/assets/vectores/googleads.svg new file mode 100644 index 0000000..1a79c3e --- /dev/null +++ b/assets/vectores/googleads.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + diff --git a/assets/vectores/insta.svg b/assets/vectores/insta.svg new file mode 100644 index 0000000..4b8b338 --- /dev/null +++ b/assets/vectores/insta.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/assets/vectores/meta.svg b/assets/vectores/meta.svg new file mode 100644 index 0000000..80ca0bf --- /dev/null +++ b/assets/vectores/meta.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/assets/vectores/openai.svg b/assets/vectores/openai.svg new file mode 100644 index 0000000..2183050 --- /dev/null +++ b/assets/vectores/openai.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/assets/vectores/tiktok.svg b/assets/vectores/tiktok.svg new file mode 100644 index 0000000..254f7ad --- /dev/null +++ b/assets/vectores/tiktok.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/vectores/whatsapp.svg b/assets/vectores/whatsapp.svg new file mode 100644 index 0000000..912e796 --- /dev/null +++ b/assets/vectores/whatsapp.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/vectores/wordpress.svg b/assets/vectores/wordpress.svg new file mode 100644 index 0000000..01684df --- /dev/null +++ b/assets/vectores/wordpress.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/biolink.html b/biolink.html new file mode 100644 index 0000000..2aa6a89 --- /dev/null +++ b/biolink.html @@ -0,0 +1,95 @@ + + + + + + + Estudio Creativo - Biolink + + + + + +
+
+ Estudio Creativo +

Estudio Creativo

+ +
+
+

Transformando ideas en experiencias visuales extraordinarias

+
+ +
+ +
+ +
+
Sitio Web
+
+ +
+ + + +
+ +
+
Branding & Identidad
+
+ +
+ + + +
+ +
+
Planes y Servicios
+
+ +
+ + + + + +
+ +
+
Whatsapp
+
+ +
+ +
+ +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/inicio-PatriPad.html b/inicio-PatriPad.html deleted file mode 100644 index 93631c2..0000000 --- a/inicio-PatriPad.html +++ /dev/null @@ -1,277 +0,0 @@ - - - - - - - Inicio - A&R - - - - - - -
- -
-
-

Marcas con esencia, construidas con estrategia

-

Diseñamos servicios que se adaptan a tu realidad, para ayudarte a crecer sin perder lo que te hace único

-
- Hablemos - Conocé más -
-
-
- - -
-
- -
-

¿Qué necesita hoy tu negocio?

-

Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.

- Ver todos los servicios -
- - -
- -
-
- -

Construir una marca

-
-
- -

Construcción de Identidad Estratégica

-

Definimos el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.

- Conocer más - -
-
- - -
-
- -

Mejorar presencia digital

-
-
- -

Comunidades que Convierten

-

Creamos contenido de valor y gestionamos tus redes para construir una comunidad activa, fiel y comprometida con tu marca.

- Conocer más - -
-
- - -
-
- -

Generar Contenido

-
-
- -

Experiencias Digitales Impactantes

-

Diseñamos y desarrollamos sitios web y plataformas digitales que no solo se ven bien, sino que generan resultados tangibles.

- Conocer más - -
-
- - -
-
- -

Automatizar procesos

-
-
- -

Historias que Enamoran

-

Producimos contenido audiovisual y gráfico de alta calidad que cuenta la historia de tu marca y cautiva a tu audiencia.

- Conocer más - -
-
- - -
-
- -

Conseguir más clientes

-
-
- -

Campañas que Escalan Resultados

-

Gestionamos campañas de paid media en Meta, Google y LinkedIn para maximizar tu ROI y alcanzar a los clientes correctos.

- Conocer más - -
-
- - -
-
- -

Consultoría de Marketing

-
-
- -

Asesoramiento Estratégico Integral

-

Te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.

- Conocer más - -
-
-
-
-
- - -
-
-

¿Qué necesita hoy tu negocio?

-

Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.

-
- -
- -
-
-
-
-
Pregunta 1 de 4
-
- - -
- -
- - - - - - -
-
- - -
-
-

Método A&R

-

Hablamos de tu marca y objetivos.

-
- -
- -
-
- - -
-
-

Contacto

-

Reunión de brief

-

Entregables, inversion y tiempos.

-
-
- - -
-
- - -
-
-

Propuesta

-

Plan de trabajo

-

Concepto visual a tu aprobación.

-
-
- - -
-
- - -
-
-

Diseño

-

Dirección de arte

-

Concepto visual a tu aprobación.

-
-
- - -
-
- - -
-
-

Producción

-

Desarrollo

-

Construimos con seguimiento.

-
-
- - -
-
- - -
-
-

Revisión

-

Ajustes finales

-

Tu feedback moldea el resultado.

-
-
- - -
-
- - -
-
-

Lanzamiento

-

Entrega

-

Accesos y capacitación completa.

-
-
-
-
- - -
-

Sección 5

-

Contenido pendiente de definir.

-
- - -
-

Sección 6

-

Contenido pendiente de definir.

-
- - -
-

Sección 7

-

Contenido pendiente de definir.

-
-
- - - - - - - \ No newline at end of file diff --git a/inicio.html b/inicio.html index 4f94f98..3e61d44 100644 --- a/inicio.html +++ b/inicio.html @@ -344,20 +344,83 @@
+ +
- Proyecto 1 +
+ Branding + Identidad Visual + Manual de Marca + Redes Sociales + Contenido Audiovisual + Paid Media + Estrategia Digital +
+
+ Mordi +
+ +
- Proyecto 2 +
+ Web + UX/UI + Apertura de Redes + SEO +
+
+ ArWork's +
+ +
- Proyecto 3 +
+ Diseño Web + Integración de Blog +
+
+ Ide Consultores +
+ + +
+
+ Branding + Diseño Web + Redes Sociales + Contenido Audiovisual + Paid Media + Estrategia Digital + Automatización +
+
+ VettaIO +
+
+ + +
+
+ Branding + Contenido Audiovisual +
+
+ Coccoline +
+
+
+
+ + +
@@ -373,22 +436,28 @@
- +
- +
- +
- +
- + +
+
+ +
+
+
@@ -398,22 +467,28 @@
- +
- +
- +
- +
- + +
+
+ +
+
+
diff --git a/scripts/main.js b/scripts/main.js index 1932232..ede5e6f 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -185,6 +185,8 @@ document.addEventListener('DOMContentLoaded', async () => { if (yearEl) yearEl.textContent = new Date().getFullYear(); initServiciosAccordion(); + initNavbarAutoHide(); + }); /* ============================================ @@ -575,6 +577,97 @@ function initMarqueeHover() { }); } +/*========================================== + nav +=============================================*/ +function initNavbarAutoHide() { + console.log('🔵 initNavbarAutoHide: iniciando...'); + + // Reintentar hasta que el header exista (por si se carga async) + let attempts = 0; + const MAX_ATTEMPTS = 50; // 5 segundos + + const tryInit = () => { + const header = document.querySelector('.site-header'); + console.log('🔵 intento', attempts, '- header:', header); + + if (!header) { + attempts++; + if (attempts < MAX_ATTEMPTS) { + setTimeout(tryInit, 100); + } else { + console.error('❌ Navbar: no se encontró .site-header'); + } + return; + } + + console.log('✅ Navbar encontrado, registrando scroll listener...'); + + const hero = document.getElementById('hero'); + const UMBRAL_HERO = 100; // píxeles mínimos antes de activar el auto-hide + let lastScrollY = window.scrollY; + let ticking = false; + + const updateHeader = () => { + const currentScrollY = window.scrollY; + const delta = currentScrollY - lastScrollY; + + console.log('📜 scrollY:', currentScrollY, '| delta:', delta); + + // 1. Si el menú fullscreen está abierto: siempre visible + if (document.body.classList.contains('menu-open')) { + header.classList.remove('is-hidden'); + lastScrollY = currentScrollY; + ticking = false; + return; + } + + // 2. Si estamos dentro del hero (primeros 100px): siempre visible + if (currentScrollY <= UMBRAL_HERO) { + header.classList.remove('is-hidden'); + lastScrollY = currentScrollY; + ticking = false; + return; + } + + // 3. Ignorar micro-movimientos + if (Math.abs(delta) < 5) { + ticking = false; + return; + } + + // 4. Scroll hacia abajo → ocultar + if (delta > 0) { + header.classList.add('is-hidden'); + console.log(' → ocultando header'); + } + // 5. Scroll hacia arriba → mostrar + else { + header.classList.remove('is-hidden'); + console.log(' → mostrando header'); + } + + lastScrollY = currentScrollY; + ticking = false; + }; + + window.addEventListener('scroll', () => { + if (!ticking) { + window.requestAnimationFrame(updateHeader); + ticking = true; + } + }, { passive: true }); + + // Resetear al redimensionar + window.addEventListener('resize', () => { + lastScrollY = window.scrollY; + }); + + console.log('✅ Navbar auto-hide listo'); + }; + + tryInit(); +} // Inicializar cuestionario al cargar la página document.addEventListener('DOMContentLoaded', () => { @@ -588,4 +681,5 @@ document.addEventListener('DOMContentLoaded', () => { initMetodologiaAnimation(); initPlanesFocusEffect(); initPortfolioCarousel(); + }); \ No newline at end of file diff --git a/style/main.css b/style/main.css index 374810c..aa1e1f9 100644 --- a/style/main.css +++ b/style/main.css @@ -169,6 +169,18 @@ ul { top: 0; z-index: 100; box-shadow: var(--shadow); + transition: transform 0.35s ease, box-shadow 0.35s ease; + will-change: transform; +} +.site-header.is-hidden { + transform: translateY(-100%); + box-shadow: none; +} +.site-header.is-scrolled { + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); +} +body.menu-open .site-header { + transform: translateY(0) !important; } .main-nav { @@ -1967,7 +1979,9 @@ RESPONSIVE METODOLOGÍA align-self: flex-start; } -/* Columna Derecha: Carrusel */ +/* ============================================ + CARRUSEL DE PORTFOLIO (CON TAGS) + ============================================ */ .portfolio-carousel { position: relative; width: 100%; @@ -1976,12 +1990,15 @@ RESPONSIVE METODOLOGÍA .carousel-container { position: relative; width: 100%; - aspect-ratio: 16 / 10; + /* Altura fija para contener tags + imagen 4:3 */ + min-height: 420px; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow); + background-color: var(--bg-surface); } +/* Cada slide */ .carousel-slide { position: absolute; top: 0; @@ -1990,13 +2007,56 @@ RESPONSIVE METODOLOGÍA height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; + display: flex; + flex-direction: column; + padding: var(--spacing-sm); + gap: var(--spacing-sm); } .carousel-slide.active { opacity: 1; } +/* Tags dentro del slide */ +.slide-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + flex-shrink: 0; +} + +.slide-tag { + font-family: var(--font-small); + font-size: 0.75rem; + font-weight: 600; + padding: 0.3rem 0.75rem; + border-radius: 999px; + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); + letter-spacing: 0.3px; + line-height: 1.2; +} + +/* Wrapper de la imagen (respeta ratio 4:3) */ +.slide-image-wrapper { + flex: 1; + width: 100%; + border-radius: 12px; + overflow: hidden; + position: relative; + background-color: var(--bg-surface-elevated); +} + +.slide-image-wrapper::before { + content: ""; + display: block; + padding-top: 75%; /* Ratio 4:3 */ +} + .carousel-image { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; object-fit: cover; @@ -2029,6 +2089,59 @@ RESPONSIVE METODOLOGÍA background-color: var(--btn-primary-hover); } +/* ============================================ + RESPONSIVE CARRUSEL PORTFOLIO + ============================================ */ +@media (max-width: 968px) { + .portfolio-container { + grid-template-columns: 1fr; + gap: var(--spacing-md); + } + + .portfolio-text { + text-align: center; + align-items: center; + } + + .portfolio-subtitle { + max-width: 100%; + } + + .portfolio-text .btn { + align-self: center; + } + + .carousel-container { + min-height: 380px; + } +} + +@media (max-width: 768px) { + .portfolio-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .carousel-container { + min-height: 340px; + } + + .slide-tag { + font-size: 0.7rem; + padding: 0.25rem 0.6rem; + } +} + +@media (max-width: 480px) { + .carousel-container { + min-height: 300px; + } + + .carousel-slide { + padding: var(--spacing-xs); + gap: var(--spacing-xs); + } +} + /* ============================================ TIRA MARQUEE (ICONOS INFINITOS CON FADE) ============================================ */ @@ -2063,67 +2176,98 @@ RESPONSIVE METODOLOGÍA } } +/* ============================================ + TIRA MARQUEE (ICONOS INFINITOS) + ============================================ */ +.marquee-section { + margin-top: var(--spacing-lg); + overflow: hidden; + padding: var(--spacing-md) 0; + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); + + /* Efecto fade en los bordes */ + -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); + mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); +} + +.marquee-track { + display: flex; + gap: var(--spacing-md); + animation: marquee-scroll 35s linear infinite; + will-change: transform; +} + +@keyframes marquee-scroll { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +/* Contenedor de cada icono: tamaño fijo para alinear */ .marquee-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; - width: 80px; - height: 80px; + width: 110px; /* Ancho fijo de la caja */ + height: 60px; /* Altura fija de la caja */ } +/* El icono en sí: se adapta dentro de la caja sin deformarse */ .marquee-icon { - width: 60px; - height: 60px; + width: 100%; + height: 100%; 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; + -webkit-mask-size: contain; /* Clave: contiene el SVG sin deformarlo */ mask-size: contain; - /* Estado base: neutro y sin interactividad */ filter: grayscale(100%) opacity(0.5); color: var(--text-muted); + transition: all 0.3s ease; } -/* Iconos específicos (mantener los que ya tenías) */ -.icon-google { -webkit-mask-image: url("../assets/iconos/google.svg"); mask-image: url("../assets/iconos/google.svg"); } -.icon-meta { -webkit-mask-image: url("../assets/iconos/meta.svg"); mask-image: url("../assets/iconos/meta.svg"); } -.icon-hubspot { -webkit-mask-image: url("../assets/iconos/hubspot.svg"); mask-image: url("../assets/iconos/hubspot.svg"); } -.icon-shopify { -webkit-mask-image: url("../assets/iconos/shopify.svg"); mask-image: url("../assets/iconos/shopify.svg"); } -.icon-wordpress { -webkit-mask-image: url("../assets/iconos/wordpress.svg"); mask-image: url("../assets/iconos/wordpress.svg"); } -.icon-figma { -webkit-mask-image: url("../assets/iconos/figma.svg"); mask-image: url("../assets/iconos/figma.svg"); } -.icon-adobe { -webkit-mask-image: url("../assets/iconos/adobe.svg"); mask-image: url("../assets/iconos/adobe.svg"); } -.icon-mailchimp { -webkit-mask-image: url("../assets/iconos/mailchimp.svg"); mask-image: url("../assets/iconos/mailchimp.svg"); } +.marquee-icon:hover { + filter: grayscale(0%) opacity(1); + color: var(--brand-crimson); + transform: scale(1.1); +} + +/* Iconos específicos */ +.icon-analytics { -webkit-mask-image: url("../assets/vectores/analytics.svg"); mask-image: url("../assets/vectores/analytics.svg"); } +.icon-face { -webkit-mask-image: url("../assets/vectores/face.svg"); mask-image: url("../assets/vectores/face.svg"); } +.icon-google { -webkit-mask-image: url("../assets/vectores/google.svg"); mask-image: url("../assets/vectores/google.svg"); } +.icon-googleads { -webkit-mask-image: url("../assets/vectores/googleads.svg"); mask-image: url("../assets/vectores/googleads.svg"); } +.icon-insta { -webkit-mask-image: url("../assets/vectores/insta.svg"); mask-image: url("../assets/vectores/insta.svg"); } +.icon-meta { -webkit-mask-image: url("../assets/vectores/meta.svg"); mask-image: url("../assets/vectores/meta.svg"); } +.icon-openai { -webkit-mask-image: url("../assets/vectores/openai.svg"); mask-image: url("../assets/vectores/openai.svg"); } +.icon-tiktok { -webkit-mask-image: url("../assets/vectores/tiktok.svg"); mask-image: url("../assets/vectores/tiktok.svg"); max-width: 250px; } +.icon-whatsapp { -webkit-mask-image: url("../assets/vectores/whatsapp.svg"); mask-image: url("../assets/vectores/whatsapp.svg"); } +.icon-wordpress { -webkit-mask-image: url("../assets/vectores/wordpress.svg"); mask-image: url("../assets/vectores/wordpress.svg"); } /* ============================================ RESPONSIVE MARQUEE ============================================ */ @media (max-width: 768px) { .marquee-item { - width: 60px; - height: 60px; - } - .marquee-icon { - width: 45px; - height: 45px; + width: 90px; + height: 50px; } } @media (max-width: 480px) { .marquee-item { - width: 50px; - height: 50px; + width: 75px; + height: 40px; } - .marquee-icon { - width: 35px; - height: 35px; + .marquee-track { + gap: var(--spacing-sm); } } -/* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none;