fanfuso/ayr2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edicion footer

Browse Source
This commit is contained in:
ppugliese
2026-09-19 10:26:57 -03:00
parent c86173f574
commit 1e36901fe3
7 changed files with 303 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/vectores/arcos.svg
+12
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

assets/vectores/arcos2.svg
+12
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

assets/vectores/arcos3.svg
+14
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

includes/footer.html
+38 -17
View File
@@ -1,38 +1,59 @@
<footer class="site-footer"> <footer class="site-footer">
<!-- SECCIÓN 1: Contenido Principal (Columnas, enlaces y CTAs) -->
<div class="footer-content"> <div class="footer-content">
<div class="footer-col" id="footer-brand"> <div class="footer-col" id="footer-brand">
<!-- Marca / logo --> <a href="inicio.html" class="logo">
<span>[Logo]</span> <img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light">
<p>[Descripción breve]</p> <img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark">
</a>
<p><br>Impulsamos crecimiento, con estrategia, datos y ejecución.</p>
</div> </div>
<div class="footer-col" id="footer-links"> <div class="footer-col" id="footer-links">
<h4>Enlaces</h4> <h4>Explorar</h4>
<ul> <ul>
<li><a href="inicio.html">Inicio</a></li> <li><a href="inicio.html">Inicio</a></li>
<li><a href="servicios.html">Servicios</a></li> <li><a href="servicios.html">Servicios</a></li>
<li><a href="planes.html">Planes</a></li> <li><a href="planes.html">Planes</a></li>
<li><a href="portfolio.html">Portfolio</a></li> <li><a href="portfolio.html">Portfolio</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="blog.html">Blog</a></li> <li><a href="blog.html">Blog</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul> </ul>
</div> </div>
<div class="footer-col" id="footer-contact"> <div class="footer-col" id="footer-contact">
<h4>Contacto</h4> <h4>Soluciones</h4>
<p>[Teléfono]</p>
<p>[Email]</p>
<p>[Dirección]</p>
</div>
<div class="footer-col" id="footer-social">
<h4>Redes</h4>
<ul> <ul>
<li><a href="#" target="_blank" rel="noopener">[Red 1]</a></li> <li><a href="servicios.html">Branding</a></li>
<li><a href="#" target="_blank" rel="noopener">[Red 2]</a></li> <li><a href="servicios.html">Redes Sociales</a></li>
<li><a href="#" target="_blank" rel="noopener">[Red 3]</a></li> <li><a href="servicios.html">Diseño Web</a></li>
<li><a href="servicios.html">Automatización</a></li>
<li><a href="servicios.html">Paid Media</a></li>
</ul> </ul>
</div> </div>
<div class="footer-col" id="footer-social">
<h4></h4>
<div class="menu-buttons">
<a href="contacto.html" class="btn-menu btn-menu-primary">¿Tenés un proyecto en mente?</a>
<a href="inicio.html#diagnostico" class="btn-menu btn-menu-secondary">Empezar diagnóstico</a>
<div class="menu-social">
<a href="https://www.instagram.com/amoryroma.creativo" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i> Instagram</a>
<a href="https://web.facebook.com/amoryroma.creativo/" target="_blank" rel="noopener"><i class="fa-brands fa-facebook"></i> Facebook</a>
<a href="https://www.linkedin.com/company/amoryroma-estudiocreativo/about/" target="_blank" rel="noopener"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a>
</div>
</div>
</div>
</div> </div>
<!-- SECCIÓN 2: Franja exclusiva para los arcos (Sin repetición, centrados y sin superposición) -->
<div class="footer-decor-section" aria-hidden="true">
<div class="footer-arches-graphic"></div>
</div>
<!-- SECCIÓN 3: Copyright y Avisos Legales -->
<div class="footer-bottom"> <div class="footer-bottom">
<p>&copy; <span id="current-year"></span> [Nombre de la agencia]. Todos los derechos reservados.</p> <p>&copy; <span id="current-year"></span> Amor & Roma. Todos los derechos reservados.</p>
</div> </div>
</footer> </footer>
includes/menu.html
+2
View File
@@ -85,8 +85,10 @@
<!-- Logo de marca integrado en el menú --> <!-- Logo de marca integrado en el menú -->
<div class="menu-brand"> <div class="menu-brand">
<a href="inicio.html" class="logo">
<img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light"> <img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light">
<img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark"> <img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark">
</a>
</div> </div>
</div> </div>
</div> </div>
inicio.html
+3 -3
View File
@@ -29,7 +29,7 @@
<div class="servicios-container"> <div class="servicios-container">
<!-- Columna Izquierda: Texto introductorio --> <!-- Columna Izquierda: Texto introductorio -->
<div class="servicios-intro"> <div class="servicios-intro">
<h2 class="servicios-title">¿Qué necesita hoy tu negocio?</h2> <h2 class="servicios-title">Soluciones digitales diseñadas para hacer crecer tu negocio</h2>
<p class="servicios-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p> <p class="servicios-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
<a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a> <a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a>
</div> </div>
@@ -132,8 +132,8 @@
<!-- Sección 3: Diagnóstico --> <!-- Sección 3: Diagnóstico -->
<section id="diagnostico" class="diagnostico-section"> <section id="diagnostico" class="diagnostico-section">
<div class="diagnostico-header"> <div class="diagnostico-header">
<h2 class="diagnostico-title">¿Qué necesita hoy tu negocio?</h2> <h2 class="diagnostico-title">¿Cuál es el siguiente paso estratégico para tu negocio?</h2>
<p class="diagnostico-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p> <p class="diagnostico-subtitle">Un recorrido de orientación diseñado para entender el momento actual de tu marca,<br> y definir con precisión quirúrgica la solución que necesitas.</p>
</div> </div>
<div class="diagnostico-card"> <div class="diagnostico-card">
style/main.css
+222 -85
View File
@@ -1,14 +1,14 @@
/* ============================================ /* ============================================
FUENTES DE MARCA 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) VARIABLES DE TEMA (modo claro por defecto)
============================================ */ ============================================ */
:root { :root {
/* Paleta Base / Primitivas de Marca */ /* Paleta Base / Primitivas de Marca */
--brand-plum: #221728; --brand-plum: #170c1d;
--brand-crimson: #ba124d; --brand-crimson: #ba124d;
--brand-teal: #003f52; --brand-teal: #003f52;
--brand-sage-light: #eaf0ee; --brand-sage-light: #eaf0ee;
@@ -19,7 +19,7 @@
--bg-base: var(--brand-sage-light); --bg-base: var(--brand-sage-light);
--bg-surface: #ffffff; --bg-surface: #ffffff;
--bg-surface-elevated: #f5f9f8; --bg-surface-elevated: #f5f9f8;
--text-primary: var(--brand-plum); --text-primary: var(--brand-plum);
--text-secondary: var(--brand-teal); --text-secondary: var(--brand-teal);
--text-muted: rgba(34, 23, 40, 0.65); --text-muted: rgba(34, 23, 40, 0.65);
@@ -30,6 +30,7 @@
--btn-secondary-bg: var(--brand-teal); --btn-secondary-bg: var(--brand-teal);
--btn-secondary-hover: #002c3a; --btn-secondary-hover: #002c3a;
--badge-bg: var(--brand-rose-muted); --badge-bg: var(--brand-rose-muted);
--badge-text: var(--brand-plum); --badge-text: var(--brand-plum);
@@ -58,8 +59,8 @@
/* Modo oscuro */ /* Modo oscuro */
[data-theme="dark"] { [data-theme="dark"] {
--bg-base: var(--bg-dark-web); --bg-base: var(--bg-dark-web);
--bg-surface: #221728; --bg-surface: #170c1d;
--bg-surface-elevated: #392842; --bg-surface-elevated: #221728;
--text-primary: var(--brand-sage-light); --text-primary: var(--brand-sage-light);
--text-secondary: var(--brand-rose-muted); --text-secondary: var(--brand-rose-muted);
@@ -106,13 +107,17 @@ body {
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
h1, h2, h3 { h1,
h2,
h3 {
font-family: var(--font-title); font-family: var(--font-title);
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
} }
h4, h5, h6 { h4,
h5,
h6 {
font-family: var(--font-subtitle); font-family: var(--font-subtitle);
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
@@ -161,24 +166,31 @@ ul {
/* ============================================ /* ============================================
HEADER Y LOGOS HEADER Y LOGOS
============================================ */ ============================================ */
#menu-container {
position: sticky;
top: 0;
z-index: 100;
}
.site-header { .site-header {
background-color: var(--bg-surface); background-color: var(--bg-surface);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: var(--spacing-sm); padding: var(--spacing-sm);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: transform 0.35s ease, box-shadow 0.35s ease; transition: transform 0.35s ease, box-shadow 0.35s ease;
will-change: transform; will-change: transform;
} }
.site-header.is-hidden { .site-header.is-hidden {
transform: translateY(-100%); transform: translateY(-100%);
box-shadow: none; box-shadow: none;
} }
.site-header.is-scrolled { .site-header.is-scrolled {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
} }
body.menu-open .site-header { body.menu-open .site-header {
transform: translateY(0) !important; transform: translateY(0) !important;
} }
@@ -355,7 +367,8 @@ body.menu-open .site-header {
transform: translateY(100%); transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
z-index: 999; 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); padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2); box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2);
isolation: isolate; isolation: isolate;
@@ -378,12 +391,10 @@ body.menu-open .site-header {
filter: blur(55px); filter: blur(55px);
border-radius: 50%; border-radius: 50%;
opacity: 0.35; opacity: 0.35;
background: radial-gradient( background: radial-gradient(ellipse at center,
ellipse at center, rgba(0, 168, 140, 0.32) 0%,
rgba(0, 168, 140, 0.32) 0%, rgba(0, 63, 82, 0.12) 45%,
rgba(0, 63, 82, 0.12) 45%, transparent 70%);
transparent 70%
);
will-change: transform; will-change: transform;
} }
@@ -391,12 +402,10 @@ body.menu-open .site-header {
[data-theme="dark"] .fullscreen-menu::before { [data-theme="dark"] .fullscreen-menu::before {
opacity: 0.42; opacity: 0.42;
mix-blend-mode: screen; mix-blend-mode: screen;
background: radial-gradient( background: radial-gradient(ellipse at center,
ellipse at center, rgba(0, 220, 160, 0.35) 0%,
rgba(0, 220, 160, 0.35) 0%, rgba(11, 80, 102, 0.28) 45%,
rgba(11, 80, 102, 0.28) 45%, transparent 70%);
transparent 70%
);
} }
/* Botón de cierre */ /* Botón de cierre */
@@ -539,7 +548,8 @@ body.menu-open .site-header {
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.9rem;
transition: all 0.25s ease; 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 */ /* Botón 1: Sólido Primario */
@@ -598,9 +608,11 @@ body.menu-open .site-header {
0% { 0% {
transform: translate(0, 0) rotate(0deg) scale(1); transform: translate(0, 0) rotate(0deg) scale(1);
} }
50% { 50% {
transform: translate(7%, 8%) rotate(10deg) scale(1.1); transform: translate(7%, 8%) rotate(10deg) scale(1.1);
} }
100% { 100% {
transform: translate(-5%, -6%) rotate(-6deg) scale(0.96); transform: translate(-5%, -6%) rotate(-6deg) scale(0.96);
} }
@@ -610,15 +622,18 @@ body.menu-open .site-header {
0% { 0% {
transform: translate(0, 0) rotate(0deg) scale(1); transform: translate(0, 0) rotate(0deg) scale(1);
} }
50% { 50% {
transform: translate(-8%, -5%) rotate(-12deg) scale(1.14); transform: translate(-8%, -5%) rotate(-12deg) scale(1.14);
} }
100% { 100% {
transform: translate(6%, 7%) rotate(8deg) scale(0.94); transform: translate(6%, 7%) rotate(8deg) scale(0.94);
} }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.fullscreen-menu::before, .fullscreen-menu::before,
.fullscreen-menu::after { .fullscreen-menu::after {
animation: none; animation: none;
@@ -634,7 +649,7 @@ body.menu-open .site-header {
padding: var(--spacing-md); padding: var(--spacing-md);
padding-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg);
} }
.menu-content { .menu-content {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--spacing-md); gap: var(--spacing-md);
@@ -656,7 +671,7 @@ body.menu-open .site-header {
} }
/* ============================================ /* ============================================
SECCIONES Y FOOTER SECCIONES Y FOOTER — AMOR & ROMA
============================================ */ ============================================ */
main section { main section {
padding: var(--spacing-md) var(--spacing-sm); padding: var(--spacing-md) var(--spacing-sm);
@@ -670,32 +685,72 @@ main section h2 {
.site-footer { .site-footer {
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
padding: var(--spacing-md) var(--spacing-sm); padding-top: var(--spacing-lg);
margin-top: auto; margin-top: auto;
background-color: var(--bg-surface); 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 { .footer-content {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md); gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
max-width: 1400px; max-width: 1400px;
margin-left: auto; margin: 0 auto var(--spacing-md) auto;
margin-right: auto; padding: 0 var(--spacing-sm);
position: relative;
z-index: 2;
} }
.footer-col h4 { .footer-col h4 {
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
color: var(--text-secondary); 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 { .footer-bottom {
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
padding-top: var(--spacing-sm); padding: var(--spacing-sm);
text-align: center; text-align: center;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--text-muted); 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); transform: translateY(30px);
animation: fadeInUp 0.9s ease-out 0.8s forwards; animation: fadeInUp 0.9s ease-out 0.8s forwards;
} }
/* ============================================ /* ============================================
BOTONES (reutilizables) BOTONES (reutilizables)
============================================ */ ============================================ */
@@ -815,6 +871,7 @@ main section h2 {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -823,21 +880,29 @@ main section h2 {
/* Shake sutil para llamar la atención (cada 6s) */ /* Shake sutil para llamar la atención (cada 6s) */
@keyframes attentionShake { @keyframes attentionShake {
0%, 85%, 100% {
0%,
85%,
100% {
transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg);
} }
87% { 87% {
transform: translateX(-4px) rotate(-1deg); transform: translateX(-4px) rotate(-1deg);
} }
89% { 89% {
transform: translateX(4px) rotate(1deg); transform: translateX(4px) rotate(1deg);
} }
91% { 91% {
transform: translateX(-3px) rotate(-0.5deg); transform: translateX(-3px) rotate(-0.5deg);
} }
93% { 93% {
transform: translateX(3px) rotate(0.5deg); transform: translateX(3px) rotate(0.5deg);
} }
95% { 95% {
transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg);
} }
@@ -854,6 +919,7 @@ main section h2 {
/* Respetar preferencia de movimiento reducido */ /* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.hero-title, .hero-title,
.hero-subtitle, .hero-subtitle,
.hero-cta-group { .hero-cta-group {
@@ -861,6 +927,7 @@ main section h2 {
opacity: 1; opacity: 1;
transform: none; transform: none;
} }
.hero-cta-primary { .hero-cta-primary {
animation: none; animation: none;
} }
@@ -874,13 +941,13 @@ main section h2 {
.hero-section { .hero-section {
padding: var(--spacing-md) var(--spacing-sm); padding: var(--spacing-md) var(--spacing-sm);
} }
.hero-cta-group { .hero-cta-group {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
max-width: 320px; max-width: 320px;
} }
.btn { .btn {
width: 100%; width: 100%;
} }
@@ -1017,26 +1084,32 @@ main section h2 {
-webkit-mask-image: url("../assets/iconos/branding.svg"); -webkit-mask-image: url("../assets/iconos/branding.svg");
mask-image: url("../assets/iconos/branding.svg"); mask-image: url("../assets/iconos/branding.svg");
} }
.icon-rrss { .icon-rrss {
-webkit-mask-image: url("../assets/iconos/redes_sociales.svg"); -webkit-mask-image: url("../assets/iconos/redes_sociales.svg");
mask-image: url("../assets/iconos/redes_sociales.svg"); mask-image: url("../assets/iconos/redes_sociales.svg");
} }
.icon-web { .icon-web {
-webkit-mask-image: url("../assets/iconos/web.svg"); -webkit-mask-image: url("../assets/iconos/web.svg");
mask-image: url("../assets/iconos/web.svg"); mask-image: url("../assets/iconos/web.svg");
} }
.icon-auto { .icon-auto {
-webkit-mask-image: url("../assets/iconos/automatizaciones.svg"); -webkit-mask-image: url("../assets/iconos/automatizaciones.svg");
mask-image: url("../assets/iconos/automatizaciones.svg"); mask-image: url("../assets/iconos/automatizaciones.svg");
} }
.icon-paid { .icon-paid {
-webkit-mask-image: url("../assets/iconos/paid_media.svg"); -webkit-mask-image: url("../assets/iconos/paid_media.svg");
mask-image: url("../assets/iconos/paid_media.svg"); mask-image: url("../assets/iconos/paid_media.svg");
} }
.icon-add { .icon-add {
-webkit-mask-image: url("../assets/iconos/ad_hoc.svg"); -webkit-mask-image: url("../assets/iconos/ad_hoc.svg");
mask-image: url("../assets/iconos/ad_hoc.svg"); mask-image: url("../assets/iconos/ad_hoc.svg");
} }
/**/ /**/
.servicio-title-short { .servicio-title-short {
@@ -1148,11 +1221,11 @@ main section h2 {
gap: var(--spacing-md); gap: var(--spacing-md);
min-height: auto; min-height: auto;
} }
.servicios-accordion { .servicios-accordion {
height: 500px; height: 500px;
} }
.servicios-intro { .servicios-intro {
text-align: center; text-align: center;
align-items: center; align-items: center;
@@ -1164,20 +1237,21 @@ main section h2 {
height: 450px; height: 450px;
padding: var(--spacing-sm); padding: var(--spacing-sm);
} }
.servicio-title-short { .servicio-title-short {
font-size: 0.95rem; font-size: 0.95rem;
} }
.servicio-title-long { .servicio-title-long {
font-size: 1.3rem; font-size: 1.3rem;
} }
.servicio-icon-large { .servicio-icon-large {
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
} }
/* ============================================ /* ============================================
SECCIÓN DIAGNÓSTICO SECCIÓN DIAGNÓSTICO
============================================ */ ============================================ */
@@ -1260,6 +1334,7 @@ SECCIÓN DIAGNÓSTICO
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -1401,32 +1476,32 @@ RESPONSIVE DIAGNÓSTICO
.diagnostico-section { .diagnostico-section {
padding: var(--spacing-md) var(--spacing-sm); padding: var(--spacing-md) var(--spacing-sm);
} }
.diagnostico-card { .diagnostico-card {
padding: var(--spacing-sm); padding: var(--spacing-sm);
} }
.diagnostico-title { .diagnostico-title {
font-size: 1.75rem; font-size: 1.75rem;
} }
.diagnostico-subtitle { .diagnostico-subtitle {
font-size: 1rem; font-size: 1rem;
} }
.pregunta-titulo { .pregunta-titulo {
font-size: 1.15rem; font-size: 1.15rem;
} }
.opcion-tarjeta { .opcion-tarjeta {
font-size: 0.9rem; font-size: 0.9rem;
padding: var(--spacing-xs); padding: var(--spacing-xs);
} }
.resultado-titulo { .resultado-titulo {
font-size: 1.4rem; font-size: 1.4rem;
} }
.resultado-solucion { .resultado-solucion {
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -1437,12 +1512,13 @@ RESPONSIVE DIAGNÓSTICO
padding: var(--spacing-sm); padding: var(--spacing-sm);
border-radius: 12px; border-radius: 12px;
} }
.opcion-tarjeta { .opcion-tarjeta {
padding: var(--spacing-xs); padding: var(--spacing-xs);
font-size: 0.85rem; font-size: 0.85rem;
} }
} }
/* ============================================ /* ============================================
SECCIÓN METODOLOGÍA SECCIÓN METODOLOGÍA
============================================ */ ============================================ */
@@ -1546,27 +1622,33 @@ SECCIÓN METODOLOGÍA
filter: grayscale(100%) opacity(0.4); filter: grayscale(100%) opacity(0.4);
color: var(--text-muted); color: var(--text-muted);
} }
.icon-contacto{
.icon-contacto {
-webkit-mask-image: url("../assets/iconos/contacto.svg"); -webkit-mask-image: url("../assets/iconos/contacto.svg");
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"); -webkit-mask-image: url("../assets/iconos/propuesta.svg");
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"); -webkit-mask-image: url("../assets/iconos/diseno.svg");
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"); -webkit-mask-image: url("../assets/iconos/produccion.svg");
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"); -webkit-mask-image: url("../assets/iconos/revision.svg");
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"); -webkit-mask-image: url("../assets/iconos/lanzamiento.svg");
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); color: var(--text-muted);
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.paso-body{
.paso-body {
font-family: var(--font-small); font-family: var(--font-small);
font-size: 0.85rem; font-size: 0.85rem;
color: var(--text-muted); color: var(--text-muted);
@@ -1669,33 +1752,33 @@ RESPONSIVE METODOLOGÍA
.metodologia-section { .metodologia-section {
padding: var(--spacing-md) var(--spacing-sm); padding: var(--spacing-md) var(--spacing-sm);
} }
.metodologia-grid { .metodologia-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm); gap: var(--spacing-sm);
} }
.metodologia-title { .metodologia-title {
font-size: 1.75rem; font-size: 1.75rem;
} }
.metodologia-subtitle { .metodologia-subtitle {
font-size: 1rem; font-size: 1rem;
} }
.paso-arco { .paso-arco {
max-width: 100px; max-width: 100px;
} }
.paso-icono { .paso-icono {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.paso-titulo { .paso-titulo {
font-size: 1rem; font-size: 1rem;
} }
.paso-subtitulo { .paso-subtitulo {
font-size: 0.8rem; font-size: 0.8rem;
} }
@@ -1713,7 +1796,7 @@ RESPONSIVE METODOLOGÍA
.paso-item { .paso-item {
transition: none; transition: none;
} }
.arco-svg, .arco-svg,
.paso-icono, .paso-icono,
.paso-titulo, .paso-titulo,
@@ -1915,7 +1998,8 @@ RESPONSIVE METODOLOGÍA
} }
.plan-featured { .plan-featured {
order: -1; /* El destacado aparece primero en mobile */ order: -1;
/* El destacado aparece primero en mobile */
} }
.plan-badge { .plan-badge {
@@ -2050,7 +2134,8 @@ RESPONSIVE METODOLOGÍA
.slide-image-wrapper::before { .slide-image-wrapper::before {
content: ""; content: "";
display: block; display: block;
padding-top: 75%; /* Ratio 4:3 */ padding-top: 75%;
/* Ratio 4:3 */
} }
.carousel-image { .carousel-image {
@@ -2151,7 +2236,7 @@ RESPONSIVE METODOLOGÍA
padding: var(--spacing-md) 0; padding: var(--spacing-md) 0;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
/* Efecto fade en los bordes izquierdo y derecho */ /* Efecto fade en los bordes izquierdo y derecho */
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); -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%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
@@ -2170,9 +2255,10 @@ RESPONSIVE METODOLOGÍA
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
100% { 100% {
/* Se mueve exactamente el 50% porque el contenido está duplicado */ /* 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; padding: var(--spacing-md) 0;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
/* Efecto fade en los bordes */ /* Efecto fade en los bordes */
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); -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%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
@@ -2199,8 +2285,13 @@ RESPONSIVE METODOLOGÍA
} }
@keyframes marquee-scroll { @keyframes marquee-scroll {
0% { transform: translateX(0); } 0% {
100% { transform: translateX(-50%); } transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
} }
/* Contenedor de cada icono: tamaño fijo para alinear */ /* Contenedor de cada icono: tamaño fijo para alinear */
@@ -2209,8 +2300,10 @@ RESPONSIVE METODOLOGÍA
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 110px; /* Ancho fijo de la caja */ width: 110px;
height: 60px; /* Altura fija de la caja */ /* Ancho fijo de la caja */
height: 60px;
/* Altura fija de la caja */
} }
/* El icono en sí: se adapta dentro de la caja sin deformarse */ /* El icono en sí: se adapta dentro de la caja sin deformarse */
@@ -2223,7 +2316,8 @@ RESPONSIVE METODOLOGÍA
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; -webkit-mask-position: center;
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; mask-size: contain;
filter: grayscale(100%) opacity(0.5); filter: grayscale(100%) opacity(0.5);
color: var(--text-muted); color: var(--text-muted);
@@ -2237,16 +2331,56 @@ RESPONSIVE METODOLOGÍA
} }
/* Iconos específicos */ /* Iconos específicos */
.icon-analytics { -webkit-mask-image: url("../assets/vectores/analytics.svg"); mask-image: url("../assets/vectores/analytics.svg"); } .icon-analytics {
.icon-face { -webkit-mask-image: url("../assets/vectores/face.svg"); mask-image: url("../assets/vectores/face.svg"); } -webkit-mask-image: url("../assets/vectores/analytics.svg");
.icon-google { -webkit-mask-image: url("../assets/vectores/google.svg"); mask-image: url("../assets/vectores/google.svg"); } mask-image: url("../assets/vectores/analytics.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-face {
.icon-openai { -webkit-mask-image: url("../assets/vectores/openai.svg"); mask-image: url("../assets/vectores/openai.svg"); } -webkit-mask-image: url("../assets/vectores/face.svg");
.icon-tiktok { -webkit-mask-image: url("../assets/vectores/tiktok.svg"); mask-image: url("../assets/vectores/tiktok.svg"); max-width: 250px; } mask-image: url("../assets/vectores/face.svg");
.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-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 RESPONSIVE MARQUEE
@@ -2263,6 +2397,7 @@ RESPONSIVE METODOLOGÍA
width: 75px; width: 75px;
height: 40px; height: 40px;
} }
.marquee-track { .marquee-track {
gap: var(--spacing-sm); gap: var(--spacing-sm);
} }
@@ -2403,17 +2538,17 @@ RESPONSIVE METODOLOGÍA
.cta-section { .cta-section {
padding: var(--spacing-md) var(--spacing-sm); padding: var(--spacing-md) var(--spacing-sm);
} }
.cta-card { .cta-card {
padding: var(--spacing-md) var(--spacing-sm); padding: var(--spacing-md) var(--spacing-sm);
border-radius: 20px; border-radius: 20px;
} }
.cta-buttons { .cta-buttons {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.btn-cta-primary, .btn-cta-primary,
.btn-cta-secondary { .btn-cta-secondary {
width: 100%; width: 100%;
@@ -2422,6 +2557,7 @@ RESPONSIVE METODOLOGÍA
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.cta-card::before, .cta-card::before,
.cta-card::after { .cta-card::after {
width: 200px; width: 200px;
@@ -2431,6 +2567,7 @@ RESPONSIVE METODOLOGÍA
/* Respetar preferencia de movimiento reducido */ /* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.btn-cta-primary, .btn-cta-primary,
.btn-cta-secondary { .btn-cta-secondary {
transition: none; transition: none;