From 49e7206a6a070cd0259d8ca7e650147822d0f094 Mon Sep 17 00:00:00 2001 From: Francisco Anfuso Date: Wed, 16 Sep 2026 09:49:04 -0300 Subject: [PATCH] desafios en curso --- .vscode/settings.json | 3 + assets/iconos/adobe.svg | 17 + assets/iconos/figma.svg | 12 + assets/iconos/google.svg | 13 + assets/iconos/hubspot.svg | 12 + assets/iconos/mailchimp.svg | 13 + assets/iconos/meta.svg | 12 + assets/iconos/shopify.svg | 15 + assets/iconos/wordpress.svg | 15 + assets/vectores/arco.svg | 6 +- includes/menu.html | 10 +- inicio-PatriPad.html | 277 ++++++ inicio.html | 205 ++++- scripts/main.js | 98 +++ style/main.css | 602 ++++++++++++- style/main2.css | 1587 +++++++++++++++++++++++++++++++++++ 16 files changed, 2864 insertions(+), 33 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 assets/iconos/adobe.svg create mode 100644 assets/iconos/figma.svg create mode 100644 assets/iconos/google.svg create mode 100644 assets/iconos/hubspot.svg create mode 100644 assets/iconos/mailchimp.svg create mode 100644 assets/iconos/meta.svg create mode 100644 assets/iconos/shopify.svg create mode 100644 assets/iconos/wordpress.svg create mode 100644 inicio-PatriPad.html create mode 100644 style/main2.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/iconos/adobe.svg b/assets/iconos/adobe.svg new file mode 100644 index 0000000..f858ab7 --- /dev/null +++ b/assets/iconos/adobe.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/assets/iconos/figma.svg b/assets/iconos/figma.svg new file mode 100644 index 0000000..7e4ef34 --- /dev/null +++ b/assets/iconos/figma.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/assets/iconos/google.svg b/assets/iconos/google.svg new file mode 100644 index 0000000..cafda80 --- /dev/null +++ b/assets/iconos/google.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/assets/iconos/hubspot.svg b/assets/iconos/hubspot.svg new file mode 100644 index 0000000..52444dc --- /dev/null +++ b/assets/iconos/hubspot.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/assets/iconos/mailchimp.svg b/assets/iconos/mailchimp.svg new file mode 100644 index 0000000..9e54551 --- /dev/null +++ b/assets/iconos/mailchimp.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/assets/iconos/meta.svg b/assets/iconos/meta.svg new file mode 100644 index 0000000..3e36669 --- /dev/null +++ b/assets/iconos/meta.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/assets/iconos/shopify.svg b/assets/iconos/shopify.svg new file mode 100644 index 0000000..937c3e4 --- /dev/null +++ b/assets/iconos/shopify.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/iconos/wordpress.svg b/assets/iconos/wordpress.svg new file mode 100644 index 0000000..d6e5164 --- /dev/null +++ b/assets/iconos/wordpress.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/vectores/arco.svg b/assets/vectores/arco.svg index 1aa237c..05f23a8 100644 --- a/assets/vectores/arco.svg +++ b/assets/vectores/arco.svg @@ -1,12 +1,12 @@ - - + diff --git a/includes/menu.html b/includes/menu.html index 9f13dcd..868e16b 100644 --- a/includes/menu.html +++ b/includes/menu.html @@ -36,12 +36,10 @@

Inicio

diff --git a/inicio-PatriPad.html b/inicio-PatriPad.html new file mode 100644 index 0000000..93631c2 --- /dev/null +++ b/inicio-PatriPad.html @@ -0,0 +1,277 @@ + + + + + + + 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 69f7251..4f94f98 100644 --- a/inicio.html +++ b/inicio.html @@ -15,8 +15,8 @@
-

Marcas con esencia, construidas con estrategia.

-

Tenemos las disciplinas que los negocios necesitan para crecer sin perder lo que los hace únicos.

+

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 @@ -166,7 +166,7 @@

Método A&R

-

Tu proceso paso a paso sin sorpresas

+

Calibramos nuestro método para cada cliente.
Nuestras decisiones se basan en datos y estrategias.

@@ -179,6 +179,7 @@

Contacto

Reunión de brief

+

Entendemos tu negocio
y tus objetivos.

@@ -191,6 +192,7 @@

Propuesta

Plan de trabajo

+

Diseñamos la estrategia,
definimos metas.

@@ -203,6 +205,7 @@

Diseño

Dirección de arte

+

Concepto visual a tu aprobación.
Activamos y monitoreamos.

@@ -215,6 +218,7 @@

Producción

Desarrollo

+

Construimos con seguimiento.
Analizamos y optimizamos.

@@ -226,40 +230,205 @@

Revisión

-

Ajustes finales

+

Feedback

+

Ajustamos según resultados y
aprendizajes del mercado.

- +
-

Lanzamiento

+

Resultado

Entrega

+

Accesos, capacitaciones y definimos próximos pasos.

- -
-

Sección 5

-

Contenido pendiente de definir.

+ +
+
+

Planes destacados

+

Soluciones diseñadas para cada etapa de tu marca

+
+ +
+ +
+
+

Plan Esencial

+

Para marcas que recién comienzan

+
+
    +
  • Identidad visual básica
    • +
  • Diseño de sitio web institucional
    • +
  • Gestión inicial de redes sociales
    • +
  • Reporte mensual de métricas
    • +
+
+ Branding + Web + Redes +
+ Ver plan completo +
+ + +
+
+ + + + Recomendado +
+
+

Plan Premium

+

Para negocios que quieren escalar

+
+
    +
  • Branding completo y manual de marca
    • +
  • Sitio web + landing de conversión
    • +
  • Producción audiovisual mensual
    • +
  • Campañas de paid media (Meta + Google)
    • +
  • Automatizaciones de WhatsApp
    • +
+
+ Branding + Web + Contenido + Paid Media + Automatización +
+ Ver plan completo +
+ + +
+
+

Plan Corporativo

+

Gestión integral 360°

+
+
    +
  • Dirección creativa y estratégica
    • +
  • Branding integral + packaging
    • +
  • Pauta multicanal (Meta, TikTok, Google)
    • +
  • Reportes quincenales con KPIs
    • +
  • Equipo dedicado a tu marca
    • +
+
+ Estrategia + Branding + Paid Media + KPIs +
+ Ver plan completo +
+
- -
-

Sección 6

-

Contenido pendiente de definir.

+ +
+
+ +
+

Nuestros últimos desafíos

+

Cada proyecto es una oportunidad para crear algo único y memorable

+ Ver portfolio completo +
+ + +
+
+
+ Proyecto 1 +
+
+ Proyecto 2 +
+
+ Proyecto 3 +
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
- -
-

Sección 7

-

Contenido pendiente de definir.

+ +
+
+

¿Listo para hacer crecer tu marca?

+

Contanos tu desafío y diseñemos juntos la estrategia que tu negocio necesita. Sin compromiso, sin vueltas.

+
+ Hablemos ahora + Conocé nuestros servicios +
+
diff --git a/scripts/main.js b/scripts/main.js index 77f90b6..1932232 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -479,6 +479,102 @@ function initMetodologiaAnimation() { // Inicializar el primer estado (sin animación aún) actualizarEstados(); } +/* ============================================ + EFECTO FOCO EN TARJETAS DE PLANES + ============================================ */ +function initPlanesFocusEffect() { + const grid = document.getElementById('planes-grid'); + if (!grid) return; + + const cards = grid.querySelectorAll('.plan-card'); + if (cards.length === 0) return; + + cards.forEach(card => { + card.addEventListener('mouseenter', () => { + grid.classList.add('is-hovering'); + card.classList.add('is-focused'); + }); + + card.addEventListener('mouseleave', () => { + grid.classList.remove('is-hovering'); + card.classList.remove('is-focused'); + }); + }); +} + + +/* ============================================ + CARRUSEL AUTOMÁTICO DE PORTFOLIO + ============================================ */ +function initPortfolioCarousel() { + const slides = document.querySelectorAll('.carousel-slide'); + const indicators = document.querySelectorAll('.indicator'); + + if (slides.length === 0) return; + + let currentSlide = 0; + const INTERVAL = 4000; // 4 segundos + let intervalId; + + function goToSlide(index) { + // Remover clase active de todos + slides.forEach(slide => slide.classList.remove('active')); + indicators.forEach(indicator => indicator.classList.remove('active')); + + // Activar el slide actual + slides[index].classList.add('active'); + indicators[index].classList.add('active'); + + currentSlide = index; + } + + function nextSlide() { + const next = (currentSlide + 1) % slides.length; + goToSlide(next); + } + + function startCarousel() { + intervalId = setInterval(nextSlide, INTERVAL); + } + + function stopCarousel() { + clearInterval(intervalId); + } + + // Click en indicadores + indicators.forEach((indicator, index) => { + indicator.addEventListener('click', () => { + stopCarousel(); + goToSlide(index); + startCarousel(); + }); + }); + + // Iniciar carrusel + startCarousel(); +} + +/* ============================================ + TIRA MARQUEE CON HOVER INTERACTIVO + ============================================ */ +function initMarqueeHover() { + const track = document.getElementById('marquee-track'); + if (!track) return; + + const icons = track.querySelectorAll('.marquee-icon'); + if (icons.length === 0) return; + + icons.forEach(icon => { + icon.addEventListener('mouseenter', () => { + track.classList.add('is-slow'); + }); + + icon.addEventListener('mouseleave', () => { + track.classList.remove('is-slow'); + }); + }); +} + // Inicializar cuestionario al cargar la página document.addEventListener('DOMContentLoaded', () => { @@ -490,4 +586,6 @@ document.addEventListener('DOMContentLoaded', () => { document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario); } initMetodologiaAnimation(); + initPlanesFocusEffect(); + initPortfolioCarousel(); }); \ No newline at end of file diff --git a/style/main.css b/style/main.css index 95ea6db..374810c 100644 --- a/style/main.css +++ b/style/main.css @@ -13,6 +13,7 @@ --brand-teal: #003f52; --brand-sage-light: #eaf0ee; --brand-rose-muted: #dfbdb9; + --bg-dark-web: #110916; /* Tema Claro (Por Defecto) */ --bg-base: var(--brand-sage-light); @@ -56,8 +57,8 @@ /* Modo oscuro */ [data-theme="dark"] { - --bg-base: var(--brand-plum); - --bg-surface: #2d2034; + --bg-base: var(--bg-dark-web); + --bg-surface: #221728; --bg-surface-elevated: #392842; --text-primary: var(--brand-sage-light); @@ -343,7 +344,7 @@ ul { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; z-index: 999; overflow: hidden; /* Clave para contener los destellos de la aurora */ - padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); + padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm); box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2); isolation: isolate; } @@ -615,7 +616,7 @@ ul { /* ============================================ RESPONSIVE ============================================ */ -@media (max-width: 768px) { +@media (max-width: 769px) { .fullscreen-menu { height: 85vh; padding: var(--spacing-md); @@ -1569,7 +1570,7 @@ SECCIÓN METODOLOGÍA .paso-titulo { font-family: var(--font-title); font-style: italic; - font-size: 1.1rem; + font-size: 1.2rem; color: var(--text-primary); font-weight: 700; transition: all 0.5s ease; @@ -1577,6 +1578,12 @@ SECCIÓN METODOLOGÍA .paso-subtitulo { font-family: var(--font-body); + font-size: 1rem; + color: var(--text-muted); + transition: all 0.5s ease; +} +.paso-body{ + font-family: var(--font-small); font-size: 0.85rem; color: var(--text-muted); transition: all 0.5s ease; @@ -1629,7 +1636,7 @@ ESTADOS DE ANIMACIÓN } .paso-item.previous .paso-titulo { - color: var(--brand-teal); + color: var(--text-muted); } .paso-item.previous .paso-subtitulo { @@ -1701,4 +1708,587 @@ RESPONSIVE METODOLOGÍA .paso-subtitulo { transition: none; } +} + +/* ============================================ + SECCIÓN PLANES DESTACADOS + ============================================ */ +.planes-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.planes-header { + text-align: center; + max-width: 700px; + margin: 0 auto var(--spacing-lg); +} + +.planes-title { + font-size: clamp(2rem, 4vw, 3rem); + color: var(--text-primary); + margin-bottom: var(--spacing-sm); + line-height: 1.15; +} + +.planes-subtitle { + font-size: 1.1rem; + color: var(--text-muted); + line-height: 1.6; +} + +/* Grid de tarjetas */ +.planes-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-md); + max-width: 1200px; + margin: 0 auto; + align-items: stretch; +} + +/* Tarjeta base */ +.plan-card { + position: relative; + background-color: var(--bg-surface); + border: 1.5px solid var(--border); + border-radius: 16px; + padding: var(--spacing-md); + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + height: 100%; +} + +/* Efecto foco: cuando el grid está en hover, todas se atenúan */ +.planes-grid.is-hovering .plan-card { + opacity: 0.45; + transform: scale(0.97); + filter: grayscale(30%); +} + +/* La tarjeta activa resalta sobre las demás */ +.planes-grid.is-hovering .plan-card.is-focused { + opacity: 1; + transform: scale(1.03); + filter: grayscale(0%); + border-color: var(--btn-primary-bg); + box-shadow: 0 12px 32px -8px rgba(186, 18, 77, 0.25); + z-index: 2; +} + +/* Hover individual (fallback si JS no carga) */ +.plan-card:hover { + border-color: var(--btn-primary-bg); + box-shadow: 0 12px 32px -8px rgba(186, 18, 77, 0.25); + transform: translateY(-4px); +} + +/* Header de la tarjeta */ +.plan-header { + margin-bottom: var(--spacing-xs); +} + +.plan-title { + font-size: 1.5rem; + color: var(--text-primary); + margin-bottom: 0.25rem; + line-height: 1.2; +} + +.plan-subtitle { + font-family: var(--font-body); + font-size: 0.95rem; + color: var(--text-muted); + font-style: normal; + font-weight: 400; +} + +/* Lista de características */ +.plan-features { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.6rem; + flex: 1; +} + +.plan-features li { + font-size: 0.95rem; + color: var(--text-primary); + padding-left: 1.5rem; + position: relative; + line-height: 1.4; +} + +.plan-features li::before { + content: ""; + position: absolute; + left: 0; + top: 0.45rem; + width: 8px; + height: 8px; + background-color: var(--btn-primary-bg); + border-radius: 50%; +} + +/* Tags de servicios */ +.plan-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-top: var(--spacing-xs); +} + +.plan-tag { + font-family: var(--font-small); + font-size: 0.75rem; + font-weight: 600; + padding: 0.3rem 0.7rem; + border-radius: 999px; + background-color: var(--badge-bg); + color: var(--badge-text); + letter-spacing: 0.3px; +} + +/* CTA */ +.plan-cta { + margin-top: var(--spacing-sm); + align-self: flex-start; +} + +/* ============================================ + PLAN DESTACADO (badge tipo laurel) + ============================================ */ +.plan-featured { + border-color: var(--brand-rose-muted); + background-color: var(--bg-surface-elevated); +} + +.plan-badge { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.3rem 0.9rem; + background-color: var(--bg-surface); + border: 1px solid var(--brand-rose-muted); + border-radius: 999px; + color: var(--brand-crimson); + font-family: var(--font-small); + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + box-shadow: 0 2px 8px -2px rgba(186, 18, 77, 0.15); +} + +.laurel-icon { + width: 14px; + height: 14px; + stroke: var(--brand-crimson); +} + +/* ============================================ + RESPONSIVE PLANES + ============================================ */ +@media (max-width: 968px) { + .planes-grid { + grid-template-columns: 1fr; + max-width: 500px; + } + + .plan-featured { + order: -1; /* El destacado aparece primero en mobile */ + } + + .plan-badge { + top: -10px; + } +} + +@media (max-width: 480px) { + .planes-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .plan-card { + padding: var(--spacing-sm); + } + + .plan-title { + font-size: 1.3rem; + } +} + +/* ============================================ + SECCIÓN PORTFOLIO + ============================================ */ +.portfolio-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.portfolio-container { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: var(--spacing-lg); + max-width: 1400px; + margin: 0 auto; + align-items: center; +} + +/* Columna Izquierda: Texto */ +.portfolio-text { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.portfolio-title { + font-size: clamp(2rem, 4vw, 3rem); + color: var(--text-primary); + line-height: 1.15; +} + +.portfolio-subtitle { + font-size: 1.1rem; + color: var(--text-muted); + line-height: 1.6; + max-width: 450px; +} + +.portfolio-text .btn { + margin-top: var(--spacing-sm); + align-self: flex-start; +} + +/* Columna Derecha: Carrusel */ +.portfolio-carousel { + position: relative; + width: 100%; +} + +.carousel-container { + position: relative; + width: 100%; + aspect-ratio: 16 / 10; + overflow: hidden; + border-radius: 16px; + box-shadow: var(--shadow); +} + +.carousel-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 0.8s ease-in-out; +} + +.carousel-slide.active { + opacity: 1; +} + +.carousel-image { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +/* Indicadores del carrusel */ +.carousel-indicators { + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: var(--spacing-sm); +} + +.indicator { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: var(--border); + cursor: pointer; + transition: all 0.3s ease; +} + +.indicator.active { + background-color: var(--btn-primary-bg); + transform: scale(1.2); +} + +.indicator:hover { + background-color: var(--btn-primary-hover); +} + +/* ============================================ + TIRA MARQUEE (ICONOS INFINITOS CON FADE) + ============================================ */ +.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 izquierdo y derecho */ + -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); + /* Animación continua y lineal */ + animation: marquee-scroll 35s linear infinite; + will-change: transform; +} + +/* Animación de desplazamiento infinito */ +@keyframes marquee-scroll { + 0% { + transform: translateX(0); + } + 100% { + /* Se mueve exactamente el 50% porque el contenido está duplicado */ + transform: translateX(-50%); + } +} + +.marquee-item { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; +} + +.marquee-icon { + width: 60px; + height: 60px; + 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; + /* Estado base: neutro y sin interactividad */ + filter: grayscale(100%) opacity(0.5); + color: var(--text-muted); +} + +/* 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"); } + +/* ============================================ + RESPONSIVE MARQUEE + ============================================ */ +@media (max-width: 768px) { + .marquee-item { + width: 60px; + height: 60px; + } + .marquee-icon { + width: 45px; + height: 45px; + } +} + +@media (max-width: 480px) { + .marquee-item { + width: 50px; + height: 50px; + } + .marquee-icon { + width: 35px; + height: 35px; + } +} + +/* Respetar preferencia de movimiento reducido */ +@media (prefers-reduced-motion: reduce) { + .marquee-track { + animation: none; + } +} + +/* ============================================ + SECCIÓN CTA FINAL + ============================================ */ +.cta-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +/* Tarjeta contenedora con fondo teal */ +.cta-card { + max-width: 900px; + margin: 0 auto; + background-color: var(--brand-teal); + border-radius: 24px; + padding: var(--spacing-lg) var(--spacing-md); + text-align: center; + position: relative; + overflow: hidden; + box-shadow: 0 20px 60px -10px rgba(0, 63, 82, 0.4); +} + +/* Efecto de brillo sutil (glow) en las esquinas */ +.cta-card::before, +.cta-card::after { + content: ""; + position: absolute; + width: 300px; + height: 300px; + border-radius: 50%; + filter: blur(80px); + opacity: 0.35; + pointer-events: none; +} + +.cta-card::before { + top: -100px; + left: -100px; + background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%); +} + +.cta-card::after { + bottom: -100px; + right: -100px; + background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%); +} + +/* Contenido de la tarjeta */ +.cta-title { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(2rem, 4vw, 3rem); + color: #ffffff; + margin-bottom: var(--spacing-sm); + line-height: 1.15; + position: relative; + z-index: 1; +} + +.cta-subtitle { + font-family: var(--font-body); + font-size: clamp(1rem, 2vw, 1.15rem); + color: rgba(255, 255, 255, 0.85); + max-width: 600px; + margin: 0 auto var(--spacing-md); + line-height: 1.6; + position: relative; + z-index: 1; +} + +/* Botones */ +.cta-buttons { + display: flex; + justify-content: center; + gap: var(--spacing-sm); + flex-wrap: wrap; + position: relative; + z-index: 1; +} + +/* Botón primario invertido (claro sobre teal) */ +.btn-cta-primary { + background-color: #ffffff; + color: var(--brand-teal); + border: 1.5px solid #ffffff; + padding: 0.85rem 2rem; + border-radius: 999px; + font-family: var(--font-small); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.2); +} + +.btn-cta-primary:hover { + background-color: var(--brand-crimson); + color: #ffffff; + border-color: var(--brand-crimson); + transform: translateY(-2px); + box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45); +} + +/* Botón secundario outline (blanco sobre teal) */ +.btn-cta-secondary { + background-color: transparent; + color: #ffffff; + border: 1.5px solid rgba(255, 255, 255, 0.6); + padding: 0.85rem 2rem; + border-radius: 999px; + font-family: var(--font-small); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-cta-secondary:hover { + background-color: rgba(255, 255, 255, 0.1); + border-color: #ffffff; + transform: translateY(-2px); +} + +/* ============================================ + RESPONSIVE CTA FINAL + ============================================ */ +@media (max-width: 768px) { + .cta-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .cta-card { + padding: var(--spacing-md) var(--spacing-sm); + border-radius: 20px; + } + + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .btn-cta-primary, + .btn-cta-secondary { + width: 100%; + max-width: 320px; + } +} + +@media (max-width: 480px) { + .cta-card::before, + .cta-card::after { + width: 200px; + height: 200px; + } +} + +/* Respetar preferencia de movimiento reducido */ +@media (prefers-reduced-motion: reduce) { + .btn-cta-primary, + .btn-cta-secondary { + transition: none; + } } \ No newline at end of file diff --git a/style/main2.css b/style/main2.css new file mode 100644 index 0000000..a059b43 --- /dev/null +++ b/style/main2.css @@ -0,0 +1,1587 @@ +/* ============================================ + FUENTES DE MARCA + ============================================ */ +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap'); + +/* ============================================ + BREAKPOINTS (documentación) + -------------------------------------------- + sm : 480px → móvil pequeño + md : 768px → móvil grande / tablet vertical + lg : 1024px → tablet horizontal / desktop pequeño + ============================================ */ + +/* ============================================ + VARIABLES DE TEMA (modo claro por defecto) + ============================================ */ +:root { + /* Paleta Base / Primitivas de Marca */ + --brand-plum: #221728; + --brand-crimson: #ba124d; + --brand-teal: #003f52; + --brand-sage-light: #eaf0ee; + --brand-rose-muted: #dfbdb9; + + /* Tema Claro (Por Defecto) */ + --bg-base: var(--brand-sage-light); + --bg-surface: #ffffff; + --bg-surface-elevated: #f5f9f8; + + --text-primary: var(--brand-plum); + --text-secondary: var(--brand-teal); + --text-muted: rgba(34, 23, 40, 0.65); + --text-on-accent: #ffffff; + + --btn-primary-bg: var(--brand-crimson); + --btn-primary-hover: #9c0f40; + --btn-secondary-bg: var(--brand-teal); + --btn-secondary-hover: #002c3a; + + --badge-bg: var(--brand-rose-muted); + --badge-text: var(--brand-plum); + + --border: rgba(0, 63, 82, 0.12); + --shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08); + --shadow-btn: 0 4px 14px -3px rgba(186, 18, 77, 0.35); + --shadow-btn-hover: 0 6px 20px -3px rgba(186, 18, 77, 0.45); + --glow-animation: rgba(186, 18, 77, 0.25); + + /* Tipografía de Marca */ + --font-title: 'Literata', serif; + --font-subtitle: 'Literata', serif; + --font-body: 'Raleway', sans-serif; + --font-small: 'Jost', sans-serif; + --font-signature: 'Windsong', cursive; + + --font-family-base: var(--font-body); + --font-size-base: 16px; + + /* Espaciados */ + --spacing-xs: 0.5rem; + --spacing-sm: 1rem; + --spacing-md: 2rem; + --spacing-lg: 4rem; + --header-height: 72px; +} + +/* Modo oscuro */ +[data-theme="dark"] { + --bg-base: var(--brand-plum); + --bg-surface: #2d2034; + --bg-surface-elevated: #392842; + + --text-primary: var(--brand-sage-light); + --text-secondary: var(--brand-rose-muted); + --text-muted: rgba(234, 240, 238, 0.65); + --text-on-accent: #ffffff; + + --btn-primary-bg: var(--brand-crimson); + --btn-primary-hover: #d81a5c; + --btn-secondary-bg: #0b5066; + --btn-secondary-hover: #10637d; + + --badge-bg: rgba(223, 189, 185, 0.18); + --badge-text: var(--brand-rose-muted); + + --border: rgba(234, 240, 238, 0.12); + --shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45); + --shadow-btn: 0 4px 14px -3px rgba(186, 18, 77, 0.5); + --shadow-btn-hover: 0 6px 20px -3px rgba(216, 26, 92, 0.6); + --glow-animation: rgba(186, 18, 77, 0.45); +} + +/* ============================================ + RESET BÁSICO + ============================================ */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: var(--font-size-base); + scroll-behavior: smooth; +} + +body { + font-family: var(--font-family-base); + background-color: var(--bg-base); + color: var(--text-primary); + line-height: 1.5; + min-height: 100vh; + display: flex; + flex-direction: column; + transition: background-color 0.3s ease, color 0.3s ease; +} + +h1, h2, h3 { + font-family: var(--font-title); + font-style: italic; + font-weight: 700; +} + +h4, h5, h6 { + font-family: var(--font-subtitle); + font-style: italic; + font-weight: 400; +} + +small { + font-family: var(--font-small); +} + +button, +.btn, +[class*="btn-"] { + font-family: var(--font-small); +} + +.signature, +.firma { + font-family: var(--font-signature); + font-weight: 400; +} + +body.menu-open { + overflow: hidden; + padding-right: var(--scrollbar-width, 0px); +} + +main { + flex: 1; +} + +img, +video { + max-width: 100%; + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} + +/* ============================================ + UTILIDADES BASE + ============================================ */ + +/* --- Secciones genéricas --- */ +.section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.section-header { + text-align: center; + max-width: 700px; + margin: 0 auto var(--spacing-lg); +} + +.section-title { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(2rem, 4vw, 3rem); + color: var(--text-primary); + line-height: 1.15; + margin-bottom: var(--spacing-sm); +} + +.section-subtitle { + font-family: var(--font-body); + font-size: 1.1rem; + color: var(--text-muted); + line-height: 1.6; +} + +/* --- Botones reutilizables --- */ +.btn { + display: inline-block; + padding: 0.85rem 2rem; + border-radius: 999px; + font-family: var(--font-small); + font-weight: 600; + font-size: 0.95rem; + text-align: center; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; +} + +.btn-primary { + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); + border: 1.5px solid var(--btn-primary-bg); + box-shadow: var(--shadow-btn); +} + +.btn-primary:hover { + background-color: var(--btn-primary-hover); + border-color: var(--btn-primary-hover); + color: var(--text-on-accent); + transform: translateY(-2px); + box-shadow: var(--shadow-btn-hover); +} + +.btn-secondary { + background-color: transparent; + color: var(--text-primary); + border: 1.5px solid var(--text-secondary); +} + +.btn-secondary:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--btn-primary-bg); + color: var(--btn-primary-bg); + transform: translateY(-2px); +} + +/* ============================================ + HEADER Y LOGOS + ============================================ */ +.site-header { + background-color: var(--bg-surface); + border-bottom: 1px solid var(--border); + padding: var(--spacing-sm); + position: sticky; + top: 0; + z-index: 100; + box-shadow: var(--shadow); +} + +.main-nav { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1400px; + margin: 0 auto; +} + +.logo { + display: flex; + align-items: center; +} + +.logo img { + height: 40px; + width: auto; +} + +.logo-light { + display: block; +} + +.logo-dark { + display: none; +} + +[data-theme="dark"] .logo-light { + display: none; +} + +[data-theme="dark"] .logo-dark { + display: block; +} + +/* ============================================ + BOTONES DE NAVEGACIÓN (HEADER) + ============================================ */ +.nav-actions { + display: flex; + gap: var(--spacing-sm); + align-items: center; +} + +/* Botón Menú */ +.menu-toggle { + background: none; + border: 1px solid var(--border); + color: var(--text-primary); + padding: 0.45rem 1.1rem; + cursor: pointer; + font-size: 0.95rem; + font-weight: 500; + border-radius: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + transition: all 0.3s ease; +} + +.menu-toggle:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--text-primary); +} + +.menu-icon { + width: 18px; + height: 18px; + display: block; + flex-shrink: 0; + transition: transform 0.2s ease; +} + +.menu-toggle:hover .menu-icon { + transform: scale(1.08); +} + +/* Botón Switch Tema (Circular) */ +.theme-toggle { + background: none; + border: 1px solid var(--border); + color: var(--text-primary); + padding: 0; + width: 40px; + height: 40px; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + +.theme-toggle:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--text-primary); +} + +.theme-icon { + width: 20px; + height: 20px; + display: block; + position: absolute; + transition: transform 0.5s ease, opacity 0.5s ease; +} + +/* Estado por defecto (claro) */ +.icon-sun { + opacity: 0; + transform: rotate(180deg); + pointer-events: none; +} + +.icon-moon { + opacity: 1; + transform: rotate(0deg); + pointer-events: auto; +} + +/* Estado oscuro */ +[data-theme="dark"] .icon-sun { + opacity: 1; + transform: rotate(0deg); + pointer-events: auto; +} + +[data-theme="dark"] .icon-moon { + opacity: 0; + transform: rotate(-180deg); + pointer-events: none; +} + +/* ============================================ + MENÚ DESPLEGABLE (CON EFECTO AURORA) + ============================================ */ +.menu-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(34, 23, 40, 0.55); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + z-index: 998; +} + +.menu-overlay.is-open { + opacity: 1; + visibility: visible; +} + +.fullscreen-menu { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 52vh; + background-color: var(--bg-surface); + border-top: 1px solid var(--border); + border-top-left-radius: 20px; + border-top-right-radius: 20px; + transform: translateY(100%); + transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; + z-index: 999; + overflow: hidden; + padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm); + box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2); + isolation: isolate; +} + +.fullscreen-menu.is-open { + transform: translateY(0); +} + +/* Aurora esmeralda / salvia */ +.fullscreen-menu::before { + content: ""; + position: absolute; + top: -40%; + left: -20%; + width: 140%; + height: 180%; + pointer-events: none; + z-index: -2; + filter: blur(55px); + border-radius: 50%; + opacity: 0.35; + background: radial-gradient( + ellipse at center, + rgba(0, 168, 140, 0.32) 0%, + rgba(0, 63, 82, 0.12) 45%, + transparent 70% + ); + will-change: transform; + animation: aurora-stream-1 18s ease-in-out infinite alternate; +} + +[data-theme="dark"] .fullscreen-menu::before { + opacity: 0.42; + mix-blend-mode: screen; + background: radial-gradient( + ellipse at center, + rgba(0, 220, 160, 0.35) 0%, + rgba(11, 80, 102, 0.28) 45%, + transparent 70% + ); +} + +/* Botón de cierre */ +.menu-close { + position: absolute; + z-index: 1; + top: var(--spacing-sm); + right: var(--spacing-md); + background: none; + border: 1px solid var(--border); + color: var(--text-primary); + font-size: 1.1rem; + width: 36px; + height: 36px; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.25s ease; +} + +.menu-close:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--text-primary); + transform: rotate(90deg); +} + +/* Contenedor y columnas internas */ +.menu-content { + position: relative; + z-index: 2; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-lg); + max-width: 1200px; + margin: 0 auto; + padding-top: 0.5rem; + max-height: 100%; + overflow-y: auto; +} + +.menu-column h3 { + font-family: var(--font-small); + font-style: normal; + font-size: 0.85rem; + letter-spacing: 1.2px; + text-transform: uppercase; + margin-bottom: var(--spacing-sm); + color: var(--text-secondary); + font-weight: 700; + border-bottom: 1px solid var(--border); + padding-bottom: 0.4rem; +} + +.menu-column ul { + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.menu-column a { + color: var(--text-primary); + font-size: 0.95rem; + padding: 0.25rem 0; + display: inline-block; + transition: transform 0.2s ease, color 0.2s ease; +} + +/* Solo links de navegación (no botones) reciben el desplazamiento */ +.menu-column ul a:hover { + color: var(--btn-primary-bg); + transform: translateX(4px); +} + +/* Columna 3 - Info de Contacto */ +.menu-contact-info { + margin-bottom: var(--spacing-sm); +} + +.menu-contact-info p { + margin-bottom: 0.35rem; + color: var(--text-muted); + font-size: 0.9rem; +} + +.contact-item { + display: flex; + align-items: center; + gap: 0.6rem; + color: var(--text-primary); +} + +.contact-icon { + width: 20px; + height: 16px; + display: inline-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; +} + +.icon-email { + -webkit-mask-image: url("../assets/iconos/buzon.svg"); + mask-image: url("../assets/iconos/buzon.svg"); +} + +.icon-phone { + -webkit-mask-image: url("../assets/iconos/contacto.svg"); + mask-image: url("../assets/iconos/contacto.svg"); +} + +.menu-social { + display: flex; + gap: var(--spacing-sm); + margin: var(--spacing-xs) 0 var(--spacing-sm); +} + +.menu-social a { + font-size: 0.85rem; + font-weight: 600; + color: var(--text-secondary); +} + +/* Botones del Menú */ +.menu-buttons { + display: flex; + flex-direction: column; + gap: 0.65rem; +} + +.btn-menu { + display: block; + padding: 0.65rem 1.2rem; + text-align: center; + border-radius: 999px; + font-weight: 600; + font-size: 0.9rem; + transition: all 0.25s ease; +} + +.menu-buttons .btn-menu-primary { + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); + border: 1.5px solid var(--btn-primary-bg); + box-shadow: var(--shadow-btn); +} + +.menu-buttons .btn-menu-primary:hover { + background-color: var(--btn-primary-hover); + border-color: var(--btn-primary-hover); + color: var(--text-on-accent); + transform: translateY(-1px); +} + +.menu-buttons .btn-menu-secondary { + background-color: transparent; + border: 1.5px solid var(--text-secondary); + color: var(--text-primary); +} + +.menu-buttons .btn-menu-secondary:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--btn-primary-bg); + color: var(--btn-primary-bg); + transform: translateY(-1px); +} + +/* Logo en el menú (alineado a la derecha) */ +.menu-brand { + margin-top: 1.75rem; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.menu-brand img { + height: 36px; + width: auto; + opacity: 0.95; + transition: opacity 0.2s ease; +} + +.menu-brand img:hover { + opacity: 1; +} + +/* ============================================ + SECCIÓN HERO + ============================================ */ +.hero-section { + min-height: calc(100vh - var(--header-height)); + background-color: var(--bg-base); + display: flex; + align-items: center; + justify-content: center; + padding: var(--spacing-lg) var(--spacing-md); + text-align: center; +} + +.hero-content { + max-width: 900px; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-md); +} + +.hero-title { + font-family: var(--font-title); + font-style: italic; + font-weight: 700; + font-size: clamp(2rem, 5vw, 3.5rem); + line-height: 1.15; + color: var(--text-primary); + opacity: 0; + transform: translateY(30px); + animation: fadeInUp 0.9s ease-out 0.2s forwards; +} + +.hero-subtitle { + font-family: var(--font-title); + font-style: italic; + font-weight: 400; + font-size: clamp(1rem, 2vw, 1.25rem); + line-height: 1.5; + color: var(--text-muted); + max-width: 700px; + opacity: 0; + transform: translateY(30px); + animation: fadeInUp 0.9s ease-out 0.5s forwards; +} + +.hero-cta-group { + display: flex; + gap: var(--spacing-sm); + flex-wrap: wrap; + justify-content: center; + margin-top: var(--spacing-sm); + opacity: 0; + transform: translateY(30px); + animation: fadeInUp 0.9s ease-out 0.8s forwards; +} + +.hero-cta-primary { + animation: attentionShake 6s ease-in-out infinite; +} + +.hero-cta-primary:hover { + animation-play-state: paused; +} + +/* ============================================ + SECCIÓN SERVICIOS (ACORDEÓN INTERACTIVO) + ============================================ */ +.servicios-container { + display: grid; + grid-template-columns: 1fr 1.5fr; + gap: var(--spacing-lg); + max-width: 1400px; + margin: 0 auto; + align-items: center; + min-height: 600px; +} + +.servicios-intro { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + align-items: flex-start; +} + +.servicios-intro .btn { + margin-top: var(--spacing-sm); +} + +/* Columna Derecha: Acordeón */ +.servicios-accordion { + position: relative; + width: 100%; + height: 600px; + background-color: var(--bg-surface); + border-radius: 16px; + padding: var(--spacing-md); + box-shadow: var(--shadow); + border: 1px solid var(--border); + display: flex; + flex-direction: column; + gap: var(--spacing-xs); + overflow: hidden; +} + +.servicio-item { + flex: 1; + background-color: var(--bg-surface-elevated); + border-radius: 12px; + padding: var(--spacing-sm) var(--spacing-md); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + cursor: pointer; + border: 1px solid var(--border); + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + position: relative; + min-height: 0; +} + +.servicio-item:hover:not(.is-active) { + background-color: var(--bg-surface); + border-color: var(--text-secondary); + transform: translateX(4px); +} + +/* Estado colapsado cuando hay uno activo (declarado antes del activo para claridad) */ +.servicios-accordion.has-active .servicio-item:not(.is-active) { + flex: 0; + min-height: 0; + padding: 0 var(--spacing-md); + opacity: 0; + pointer-events: none; + border-color: transparent; +} + +/* Estado activo (expandido) */ +.servicio-item.is-active { + flex: 10; + background-color: var(--bg-surface-elevated); + box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.1); + border-color: var(--btn-primary-bg); +} + +.servicio-header { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-sm); + width: 100%; + transition: opacity 0.3s ease; +} + +.servicio-icon { + width: 32px; + height: 32px; + object-fit: contain; + flex-shrink: 0; + display: inline-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; +} + +.icon-branding { + -webkit-mask-image: url("../assets/iconos/branding.svg"); + mask-image: url("../assets/iconos/branding.svg"); +} +.icon-rrss { + -webkit-mask-image: url("../assets/iconos/redes_sociales.svg"); + mask-image: url("../assets/iconos/redes_sociales.svg"); +} +.icon-web { + -webkit-mask-image: url("../assets/iconos/web.svg"); + mask-image: url("../assets/iconos/web.svg"); +} +.icon-auto { + -webkit-mask-image: url("../assets/iconos/automatizaciones.svg"); + mask-image: url("../assets/iconos/automatizaciones.svg"); +} +.icon-paid { + -webkit-mask-image: url("../assets/iconos/paid_media.svg"); + mask-image: url("../assets/iconos/paid_media.svg"); +} +.icon-add { + -webkit-mask-image: url("../assets/iconos/ad_hoc.svg"); + mask-image: url("../assets/iconos/ad_hoc.svg"); +} + +.servicio-title-short { + font-family: var(--font-title); + font-style: italic; + font-size: 1.1rem; + color: var(--text-primary); + font-weight: 700; + white-space: nowrap; +} + +.servicio-content { + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--spacing-sm); + width: 100%; + max-width: 500px; + height: 100%; + padding: var(--spacing-md); + opacity: 0; + transform: translateY(10px); + transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s; +} + +.servicio-item.is-active .servicio-header { + display: none; +} + +.servicio-item.is-active .servicio-content { + display: flex; + opacity: 1; + transform: translateY(0); +} + +.servicio-icon-large { + width: 64px; + height: 64px; + object-fit: contain; + margin-bottom: var(--spacing-xs); + display: inline-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; +} + +.servicio-title-long { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(1.5rem, 2.5vw, 2rem); + color: var(--text-primary); + font-weight: 700; + line-height: 1.2; + text-align: center; +} + +.servicio-description { + font-family: var(--font-body); + font-size: 1rem; + color: var(--text-muted); + line-height: 1.6; + text-align: center; + max-width: 450px; +} + +.servicio-content .btn { + margin-top: var(--spacing-xs); +} + +.servicio-close { + position: absolute; + top: var(--spacing-sm); + right: var(--spacing-sm); + background: none; + border: 1px solid var(--border); + color: var(--text-muted); + font-size: 1.2rem; + cursor: pointer; + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.25s ease; + z-index: 5; +} + +.servicio-close:hover { + color: var(--btn-primary-bg); + background-color: var(--bg-surface); + border-color: var(--btn-primary-bg); + transform: rotate(90deg); +} + +/* ============================================ + SECCIÓN DIAGNÓSTICO + ============================================ */ +.diagnostico-card { + max-width: 800px; + margin: 0 auto; + background-color: var(--bg-surface); + border-radius: 16px; + padding: var(--spacing-md); + box-shadow: var(--shadow); + border: 1px solid var(--border); +} + +.progreso-wrapper { + margin-bottom: var(--spacing-md); +} + +.progreso-barra { + width: 100%; + height: 8px; + background-color: var(--border); + border-radius: 4px; + overflow: hidden; + margin-bottom: var(--spacing-xs); +} + +.progreso-barra-completado { + height: 100%; + background-color: var(--btn-primary-bg); + width: 0%; + transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); + border-radius: 4px; +} + +.progreso-texto { + font-family: var(--font-small); + font-size: 0.85rem; + color: var(--text-secondary); + text-align: right; +} + +.pregunta-contenedor { + animation: fadeIn 0.4s ease; +} + +.pregunta-titulo { + font-family: var(--font-subtitle); + font-size: 1.35rem; + color: var(--text-primary); + margin-bottom: var(--spacing-md); + font-weight: 400; + line-height: 1.3; +} + +.opciones-contenedor { + display: grid; + grid-template-columns: 1fr; + gap: var(--spacing-sm); +} + +.opcion-tarjeta { + background-color: var(--bg-surface-elevated); + border: 2px solid var(--border); + border-radius: 12px; + padding: var(--spacing-sm); + cursor: pointer; + transition: all 0.25s ease; + font-family: var(--font-body); + font-size: 0.95rem; + color: var(--text-primary); + text-align: left; + width: 100%; +} + +.opcion-tarjeta:hover { + border-color: var(--btn-primary-bg); + background-color: var(--bg-surface); + transform: translateX(4px); +} + +.opcion-tarjeta:active { + transform: scale(0.98); +} + +.opcion-tarjeta.seleccionada { + border-color: var(--btn-primary-bg); + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); +} + +.btn-reiniciar { + background: none; + border: 1.5px solid var(--border); + color: var(--text-secondary); + padding: 0.65rem 1.2rem; + border-radius: 24px; + cursor: pointer; + font-family: var(--font-small); + font-size: 0.9rem; + font-weight: 600; + margin-top: var(--spacing-md); + transition: all 0.25s ease; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.btn-reiniciar:hover { + border-color: var(--btn-primary-bg); + color: var(--btn-primary-bg); + transform: translateY(-2px); +} + +.resultado-contenedor { + animation: fadeIn 0.5s ease; + background-color: var(--bg-surface-elevated); + border: 2px solid var(--btn-primary-bg); + border-radius: 16px; + padding: var(--spacing-md); + text-align: center; +} + +.resultado-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(1.5rem, 3vw, 2rem); + color: var(--btn-primary-bg); + margin-bottom: var(--spacing-sm); + font-weight: 700; + line-height: 1.2; +} + +.resultado-diagnostico { + font-size: 1.05rem; + color: var(--text-primary); + margin-bottom: var(--spacing-sm); + line-height: 1.6; +} + +.resultado-solucion { + background-color: var(--bg-surface); + border-left: 4px solid var(--btn-primary-bg); + padding: var(--spacing-sm); + margin: var(--spacing-sm) 0 var(--spacing-md); + text-align: left; + font-size: 0.95rem; + color: var(--text-primary); + border-radius: 0 8px 8px 0; +} + +.resultado-cta { + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); + border: none; + padding: 0.85rem 2rem; + border-radius: 24px; + font-family: var(--font-small); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + transition: all 0.25s ease; + box-shadow: var(--shadow-btn); + display: inline-block; +} + +.resultado-cta:hover { + background-color: var(--btn-primary-hover); + transform: translateY(-2px); + box-shadow: var(--shadow-btn-hover); +} + +/* ============================================ + SECCIÓN METODOLOGÍA + ============================================ */ +.metodologia-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: var(--spacing-md); + max-width: 1400px; + margin: 0 auto; +} + +.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); +} + +.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"); +} + +.paso-info { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.paso-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: 1.2rem; + color: var(--text-primary); + font-weight: 700; + transition: all 0.5s ease; +} + +.paso-subtitulo { + font-family: var(--font-body); + font-size: 1rem; + color: var(--text-muted); + transition: all 0.5s ease; +} + +.paso-body { + font-family: var(--font-small); + font-size: 0.85rem; + color: var(--text-muted); + transition: all 0.5s ease; +} + +/* Estados de animación */ +.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-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); +} + +/* ============================================ + FOOTER + ============================================ */ +.site-footer { + border-top: 1px solid var(--border); + padding: var(--spacing-md) var(--spacing-sm); + margin-top: auto; + background-color: var(--bg-surface); +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--spacing-md); + margin-bottom: var(--spacing-md); + max-width: 1400px; + margin-left: auto; + margin-right: auto; +} + +.footer-col h4 { + margin-bottom: var(--spacing-xs); + color: var(--text-secondary); +} + +.footer-bottom { + border-top: 1px solid var(--border); + padding-top: var(--spacing-sm); + text-align: center; + font-size: 0.875rem; + color: var(--text-muted); +} + +/* ============================================ + ANIMACIONES (KEYFRAMES) + ============================================ */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes attentionShake { + 0%, 85%, 100% { + transform: translateX(0) rotate(0deg); + } + 87% { + transform: translateX(-4px) rotate(-1deg); + } + 89% { + transform: translateX(4px) rotate(1deg); + } + 91% { + transform: translateX(-3px) rotate(-0.5deg); + } + 93% { + transform: translateX(3px) rotate(0.5deg); + } + 95% { + transform: translateX(0) rotate(0deg); + } +} + +@keyframes aurora-stream-1 { + 0% { + transform: translate(0, 0) rotate(0deg) scale(1); + } + 50% { + transform: translate(7%, 8%) rotate(10deg) scale(1.1); + } + 100% { + transform: translate(-5%, -6%) rotate(-6deg) scale(0.96); + } +} + +@keyframes aurora-stream-2 { + 0% { + transform: translate(0, 0) rotate(0deg) scale(1); + } + 50% { + transform: translate(-8%, -5%) rotate(-12deg) scale(1.14); + } + 100% { + transform: translate(6%, 7%) rotate(8deg) scale(0.94); + } +} + +/* ============================================ + ACCESIBILIDAD — movimiento reducido + ============================================ */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* ============================================ + RESPONSIVE — agrupado por breakpoint + Orden: mayor → menor + ============================================ */ + +/* ---------- max-width: 1024px ---------- */ +@media (max-width: 1024px) { + .metodologia-grid { + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-md); + } +} + +/* ---------- max-width: 768px ---------- */ +@media (max-width: 768px) { + /* Menú */ + .fullscreen-menu { + height: 85vh; + padding: var(--spacing-md); + padding-bottom: var(--spacing-lg); + } + + .menu-content { + grid-template-columns: 1fr; + gap: var(--spacing-md); + } + + .menu-column h3 { + font-size: 1.1rem; + } + + .menu-column a { + font-size: 1rem; + } + + /* Hero */ + .hero-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .hero-cta-group { + flex-direction: column; + width: 100%; + max-width: 320px; + } + + .btn { + width: 100%; + } + + /* Servicios */ + .servicios-container { + grid-template-columns: 1fr; + gap: var(--spacing-md); + min-height: auto; + } + + .servicios-accordion { + height: 500px; + } + + .servicios-intro { + text-align: center; + align-items: center; + } + + /* Diagnóstico */ + .section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .diagnostico-card { + padding: var(--spacing-sm); + } + + .section-title { + font-size: 1.75rem; + } + + .section-subtitle { + font-size: 1rem; + } + + .pregunta-titulo { + font-size: 1.15rem; + } + + .opcion-tarjeta { + font-size: 0.9rem; + padding: var(--spacing-xs); + } + + .resultado-titulo { + font-size: 1.4rem; + } + + .resultado-solucion { + font-size: 0.9rem; + } + + /* Metodología */ + .metodologia-grid { + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-sm); + } + + .paso-arco { + max-width: 100px; + } + + .paso-icono { + width: 32px; + height: 32px; + } + + .paso-titulo { + font-size: 1rem; + } + + .paso-subtitulo { + font-size: 0.8rem; + } +} + +/* ---------- max-width: 480px ---------- */ +@media (max-width: 480px) { + /* Menú */ + .fullscreen-menu { + height: 90vh; + } + + /* Servicios */ + .servicios-accordion { + height: 450px; + padding: var(--spacing-sm); + } + + .servicio-title-short { + font-size: 0.95rem; + } + + .servicio-title-long { + font-size: 1.3rem; + } + + .servicio-icon-large { + width: 48px; + height: 48px; + } + + /* Diagnóstico */ + .diagnostico-card { + padding: var(--spacing-sm); + border-radius: 12px; + } + + .opcion-tarjeta { + padding: var(--spacing-xs); + font-size: 0.85rem; + } + + /* Metodología */ + .metodologia-grid { + grid-template-columns: 1fr; + max-width: 300px; + } +} \ No newline at end of file