From 1e36901fe3a6fb7e4e14675aaeca6d9c711e9c93 Mon Sep 17 00:00:00 2001 From: Patricia Pugliese Date: Sat, 19 Sep 2026 10:26:57 -0300 Subject: [PATCH] edicion footer --- assets/vectores/arcos.svg | 12 ++ assets/vectores/arcos2.svg | 12 ++ assets/vectores/arcos3.svg | 14 ++ includes/footer.html | 55 +++++-- includes/menu.html | 2 + inicio.html | 6 +- style/main.css | 307 +++++++++++++++++++++++++++---------- 7 files changed, 303 insertions(+), 105 deletions(-) create mode 100644 assets/vectores/arcos.svg create mode 100644 assets/vectores/arcos2.svg create mode 100644 assets/vectores/arcos3.svg diff --git a/assets/vectores/arcos.svg b/assets/vectores/arcos.svg new file mode 100644 index 0000000..1d1ddc8 --- /dev/null +++ b/assets/vectores/arcos.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/assets/vectores/arcos2.svg b/assets/vectores/arcos2.svg new file mode 100644 index 0000000..ab2f163 --- /dev/null +++ b/assets/vectores/arcos2.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/assets/vectores/arcos3.svg b/assets/vectores/arcos3.svg new file mode 100644 index 0000000..b9d1206 --- /dev/null +++ b/assets/vectores/arcos3.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/includes/footer.html b/includes/footer.html index 0612525..c50817e 100644 --- a/includes/footer.html +++ b/includes/footer.html @@ -1,38 +1,59 @@ \ No newline at end of file diff --git a/includes/menu.html b/includes/menu.html index 868e16b..a4ef306 100644 --- a/includes/menu.html +++ b/includes/menu.html @@ -85,8 +85,10 @@ diff --git a/inicio.html b/inicio.html index 3e61d44..1cedf43 100644 --- a/inicio.html +++ b/inicio.html @@ -29,7 +29,7 @@
-

¿Qué necesita hoy tu negocio?

+

Soluciones digitales diseñadas para hacer crecer tu negocio

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

Ver todos los servicios
@@ -132,8 +132,8 @@
-

¿Qué necesita hoy tu negocio?

-

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

+

¿Cuál es el siguiente paso estratégico para tu negocio?

+

Un recorrido de orientación diseñado para entender el momento actual de tu marca,
y definir con precisión quirúrgica la solución que necesitas.

diff --git a/style/main.css b/style/main.css index aa1e1f9..15d1e41 100644 --- a/style/main.css +++ b/style/main.css @@ -1,14 +1,14 @@ /* ============================================ 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'); +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap'); /* ============================================ VARIABLES DE TEMA (modo claro por defecto) ============================================ */ :root { /* Paleta Base / Primitivas de Marca */ - --brand-plum: #221728; + --brand-plum: #170c1d; --brand-crimson: #ba124d; --brand-teal: #003f52; --brand-sage-light: #eaf0ee; @@ -19,7 +19,7 @@ --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); @@ -30,6 +30,7 @@ --btn-secondary-bg: var(--brand-teal); --btn-secondary-hover: #002c3a; + --badge-bg: var(--brand-rose-muted); --badge-text: var(--brand-plum); @@ -58,8 +59,8 @@ /* Modo oscuro */ [data-theme="dark"] { --bg-base: var(--bg-dark-web); - --bg-surface: #221728; - --bg-surface-elevated: #392842; + --bg-surface: #170c1d; + --bg-surface-elevated: #221728; --text-primary: var(--brand-sage-light); --text-secondary: var(--brand-rose-muted); @@ -106,13 +107,17 @@ body { transition: background-color 0.3s ease, color 0.3s ease; } -h1, h2, h3 { +h1, +h2, +h3 { font-family: var(--font-title); font-style: italic; font-weight: 700; } -h4, h5, h6 { +h4, +h5, +h6 { font-family: var(--font-subtitle); font-style: italic; font-weight: 400; @@ -161,24 +166,31 @@ ul { /* ============================================ HEADER Y LOGOS ============================================ */ +#menu-container { + position: sticky; + top: 0; + z-index: 100; +} + .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); 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; } @@ -355,7 +367,8 @@ body.menu-open .site-header { 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; /* Clave para contener los destellos de la aurora */ + overflow: hidden; + /* Clave para contener los destellos de la aurora */ padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm); box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2); isolation: isolate; @@ -378,12 +391,10 @@ body.menu-open .site-header { 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% - ); + 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; } @@ -391,12 +402,10 @@ body.menu-open .site-header { [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% - ); + 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 */ @@ -539,7 +548,8 @@ body.menu-open .site-header { font-weight: 600; font-size: 0.9rem; transition: all 0.25s ease; - transform: none !important; /* Evita heredar el translateX de los links */ + transform: none !important; + /* Evita heredar el translateX de los links */ } /* Botón 1: Sólido Primario */ @@ -598,9 +608,11 @@ body.menu-open .site-header { 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); } @@ -610,15 +622,18 @@ body.menu-open .site-header { 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); } } @media (prefers-reduced-motion: reduce) { + .fullscreen-menu::before, .fullscreen-menu::after { animation: none; @@ -634,7 +649,7 @@ body.menu-open .site-header { padding: var(--spacing-md); padding-bottom: var(--spacing-lg); } - + .menu-content { grid-template-columns: 1fr; gap: var(--spacing-md); @@ -656,7 +671,7 @@ body.menu-open .site-header { } /* ============================================ - SECCIONES Y FOOTER + SECCIONES Y FOOTER — AMOR & ROMA ============================================ */ main section { padding: var(--spacing-md) var(--spacing-sm); @@ -670,32 +685,72 @@ main section h2 { .site-footer { border-top: 1px solid var(--border); - padding: var(--spacing-md) var(--spacing-sm); + padding-top: var(--spacing-lg); margin-top: auto; background-color: var(--bg-surface); + position: relative; + /* Eliminamos overflow: hidden para permitir que los elementos respiren con orden */ } +/* 1. Contenido principal (Columnas de texto y botones) */ .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; + margin: 0 auto var(--spacing-md) auto; + padding: 0 var(--spacing-sm); + position: relative; + z-index: 2; } .footer-col h4 { margin-bottom: var(--spacing-xs); color: var(--text-secondary); + font-family: 'Literata', serif; + font-style: italic; } +/* 2. Sección 2: El contenedor exclusivo para los arcos (Sin repetición) */ +.footer-decor-section { + width: 100%; + height: 90px; /* Altura controlada para dar presencia sin invadir */ + display: flex; + justify-content: center; + align-items: center; + margin: var(--spacing-sm) 0; + position: relative; + z-index: 1; +} + +.footer-arches-graphic { + width: 1200px; /* Ancho ajustado para que luzca como un detalle sutil */ + height: 250px; + background-color: currentColor; + color: var(--text-muted); + opacity: 0.15; + + -webkit-mask-image: url("../assets/vectores/arcos3.svg"); + mask-image: url("../assets/vectores/arcos3.svg"); + -webkit-mask-repeat: no-repeat; /* Evita por completo que se repitan */ + mask-repeat: no-repeat; + -webkit-mask-position: center; /* Centrados perfectamente en la sección 2 */ + mask-position: center; + -webkit-mask-size: contain; /* Respeta la proporción geométrica original */ + mask-size: contain; +} + +/* 3. Sección 3: Copyright y Avisos Legales */ .footer-bottom { border-top: 1px solid var(--border); - padding-top: var(--spacing-sm); + padding: var(--spacing-sm); text-align: center; font-size: 0.875rem; color: var(--text-muted); + position: relative; + z-index: 2; + background-color: var(--bg-surface); + font-family: 'Jost', sans-serif; } /* ============================================ @@ -759,6 +814,7 @@ main section h2 { transform: translateY(30px); animation: fadeInUp 0.9s ease-out 0.8s forwards; } + /* ============================================ BOTONES (reutilizables) ============================================ */ @@ -815,6 +871,7 @@ main section h2 { opacity: 0; transform: translateY(30px); } + 100% { opacity: 1; transform: translateY(0); @@ -823,21 +880,29 @@ main section h2 { /* Shake sutil para llamar la atención (cada 6s) */ @keyframes attentionShake { - 0%, 85%, 100% { + + 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); } @@ -854,6 +919,7 @@ main section h2 { /* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { + .hero-title, .hero-subtitle, .hero-cta-group { @@ -861,6 +927,7 @@ main section h2 { opacity: 1; transform: none; } + .hero-cta-primary { animation: none; } @@ -874,13 +941,13 @@ main section h2 { .hero-section { padding: var(--spacing-md) var(--spacing-sm); } - + .hero-cta-group { flex-direction: column; width: 100%; max-width: 320px; } - + .btn { width: 100%; } @@ -1017,26 +1084,32 @@ main section h2 { -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 { @@ -1148,11 +1221,11 @@ main section h2 { gap: var(--spacing-md); min-height: auto; } - + .servicios-accordion { height: 500px; } - + .servicios-intro { text-align: center; align-items: center; @@ -1164,20 +1237,21 @@ main section h2 { 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; } } + /* ============================================ SECCIÓN DIAGNÓSTICO ============================================ */ @@ -1260,6 +1334,7 @@ SECCIÓN DIAGNÓSTICO opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); @@ -1401,32 +1476,32 @@ RESPONSIVE DIAGNÓSTICO .diagnostico-section { padding: var(--spacing-md) var(--spacing-sm); } - + .diagnostico-card { padding: var(--spacing-sm); } - + .diagnostico-title { font-size: 1.75rem; } - + .diagnostico-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; } @@ -1437,12 +1512,13 @@ RESPONSIVE DIAGNÓSTICO padding: var(--spacing-sm); border-radius: 12px; } - + .opcion-tarjeta { padding: var(--spacing-xs); font-size: 0.85rem; } } + /* ============================================ SECCIÓN METODOLOGÍA ============================================ */ @@ -1546,27 +1622,33 @@ SECCIÓN METODOLOGÍA filter: grayscale(100%) opacity(0.4); color: var(--text-muted); } -.icon-contacto{ + +.icon-contacto { -webkit-mask-image: url("../assets/iconos/contacto.svg"); mask-image: url("../assets/iconos/contacto.svg"); } -.icon-propuesta{ + +.icon-propuesta { -webkit-mask-image: url("../assets/iconos/propuesta.svg"); mask-image: url("../assets/iconos/propuesta.svg"); } -.icon-diseno{ + +.icon-diseno { -webkit-mask-image: url("../assets/iconos/diseno.svg"); mask-image: url("../assets/iconos/diseno.svg"); } -.icon-produccion{ + +.icon-produccion { -webkit-mask-image: url("../assets/iconos/produccion.svg"); mask-image: url("../assets/iconos/produccion.svg"); } -.icon-revision{ + +.icon-revision { -webkit-mask-image: url("../assets/iconos/revision.svg"); mask-image: url("../assets/iconos/revision.svg"); } -.icon-lanzamiento{ + +.icon-lanzamiento { -webkit-mask-image: url("../assets/iconos/lanzamiento.svg"); mask-image: url("../assets/iconos/lanzamiento.svg"); } @@ -1594,7 +1676,8 @@ SECCIÓN METODOLOGÍA color: var(--text-muted); transition: all 0.5s ease; } -.paso-body{ + +.paso-body { font-family: var(--font-small); font-size: 0.85rem; color: var(--text-muted); @@ -1669,33 +1752,33 @@ RESPONSIVE METODOLOGÍA .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; } @@ -1713,7 +1796,7 @@ RESPONSIVE METODOLOGÍA .paso-item { transition: none; } - + .arco-svg, .paso-icono, .paso-titulo, @@ -1915,7 +1998,8 @@ RESPONSIVE METODOLOGÍA } .plan-featured { - order: -1; /* El destacado aparece primero en mobile */ + order: -1; + /* El destacado aparece primero en mobile */ } .plan-badge { @@ -2050,7 +2134,8 @@ RESPONSIVE METODOLOGÍA .slide-image-wrapper::before { content: ""; display: block; - padding-top: 75%; /* Ratio 4:3 */ + padding-top: 75%; + /* Ratio 4:3 */ } .carousel-image { @@ -2151,7 +2236,7 @@ RESPONSIVE METODOLOGÍA 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%); @@ -2170,9 +2255,10 @@ RESPONSIVE METODOLOGÍA 0% { transform: translateX(0); } + 100% { /* Se mueve exactamente el 50% porque el contenido está duplicado */ - transform: translateX(-50%); + transform: translateX(-50%); } } @@ -2185,7 +2271,7 @@ RESPONSIVE METODOLOGÍA 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%); @@ -2199,8 +2285,13 @@ RESPONSIVE METODOLOGÍA } @keyframes marquee-scroll { - 0% { transform: translateX(0); } - 100% { transform: translateX(-50%); } + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-50%); + } } /* Contenedor de cada icono: tamaño fijo para alinear */ @@ -2209,8 +2300,10 @@ RESPONSIVE METODOLOGÍA display: flex; align-items: center; justify-content: center; - width: 110px; /* Ancho fijo de la caja */ - height: 60px; /* Altura fija de la caja */ + 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 */ @@ -2223,7 +2316,8 @@ RESPONSIVE METODOLOGÍA mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; - -webkit-mask-size: contain; /* Clave: contiene el SVG sin deformarlo */ + -webkit-mask-size: contain; + /* Clave: contiene el SVG sin deformarlo */ mask-size: contain; filter: grayscale(100%) opacity(0.5); color: var(--text-muted); @@ -2237,16 +2331,56 @@ RESPONSIVE METODOLOGÍA } /* 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"); } +.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 @@ -2263,6 +2397,7 @@ RESPONSIVE METODOLOGÍA width: 75px; height: 40px; } + .marquee-track { gap: var(--spacing-sm); } @@ -2403,17 +2538,17 @@ RESPONSIVE METODOLOGÍA .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%; @@ -2422,6 +2557,7 @@ RESPONSIVE METODOLOGÍA } @media (max-width: 480px) { + .cta-card::before, .cta-card::after { width: 200px; @@ -2431,6 +2567,7 @@ RESPONSIVE METODOLOGÍA /* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { + .btn-cta-primary, .btn-cta-secondary { transition: none;