-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- Vista detallada y Referencias
- Selecciona un gimnasio arriba para ver detalles aquí
-
-
-
-
-
-
@@ -195,10 +130,10 @@
Elige tu plan
RUTINAS BÁSICAS
$9.90 / mes
-
- - Rutinas guiadas para casa o un solo gym
- - Hasta 3 rutinas activas al mismo tiempo
- - Vista básica del estado de 1 gym favorito
+
+ - Crea rutinas guiadas para entrenar en casa o en un solo gym.
+ - Hasta 3 rutinas activas al mismo tiempo según tu objetivo.
+ - Vista rápida del estado de tu gym favorito: máquinas disponibles y ocupación general.
@@ -207,10 +142,10 @@
RUTINAS BÁSICAS
Más Popular
GYM FINDER PLUS
$19.90 / mes
-
- - Rutinas personalizadas por objetivo y nivel
- - Localizador de gyms ilimitado en tu ciudad
- - Detalle en tiempo real de máquinas, personas y máquinas libres por gym
+
+ - Rutinas personalizadas según tu nivel, objetivo y frecuencia de entrenamiento.
+ - Encuentra los mejores gyms cerca de ti y compáralos en segundos.
+ - Ve en tiempo real cuántas máquinas hay, cuántas se están usando y cuántas personas hay en cada gym.
@@ -218,10 +153,10 @@
GYM FINDER PLUS
MULTI-GYM PRO
$29.90 / mes
-
- - Todo lo de Gym Finder Plus para varias personas (familia o equipo)
- - Historial avanzado de rutinas, récords y ocupación por sede
- - Soporte prioritario y acceso anticipado a nuevas funciones
+
+ - Todo lo de Gym Finder Plus para varias personas (familia o equipo de entrenamiento).
+ - Historial detallado de tus rutinas, gyms visitados y momentos de mayor ocupación.
+ - Soporte prioritario y acceso anticipado a nuevas funciones y mejoras de la plataforma.
diff --git a/Front/public/css/cliente-styles.css b/Front/public/css/cliente-styles.css
index 750282c..0aa1d47 100644
--- a/Front/public/css/cliente-styles.css
+++ b/Front/public/css/cliente-styles.css
@@ -227,48 +227,3 @@ ul.feats{margin:6px 0 0 18px;color:#d4e0f4}
.sf-bottom{border-top:1px solid var(--line);padding:8px 18px;display:flex;flex-direction:column;gap:0;align-items:center;text-align:center;color:#c6d2e6}
.sf-bottom p{margin:2px 0;font-size:12px;line-height:1.3}
.sf-mini{font-size:10px;margin:0}
-
-/* Arreglo para mapas Leaflet */
-.leaflet-pane,
-.leaflet-tile,
-.leaflet-marker-icon,
-.leaflet-marker-shadow,
-.leaflet-tile-container,
-.leaflet-pane > svg,
-.leaflet-pane > canvas,
-.leaflet-zoom-box,
-.leaflet-image-layer,
-.leaflet-layer {
- position: absolute;
- left: 0;
- top: 0;
-}
-#map {
- z-index: 1; /* Asegura que el mapa esté en su capa correcta */
-}
-
-/* Estilo para cuando el mapa de Google se expande */
-.google-card.fullscreen {
- position: fixed !important;
- top: 0;
- left: 0;
- width: 100vw !important;
- height: 100vh !important;
- z-index: 9999; /* Por encima de todo */
- border-radius: 0 !important;
- border: none !important;
-}
-
-/* Ajuste para móviles: que la lista y mapas se apilen */
-@media (max-width: 768px) {
- .gym-wrap {
- grid-template-columns: 1fr !important;
- height: auto !important;
- }
- .gym-left {
- height: 300px;
- }
- .gym-right {
- height: 500px;
- }
-}
diff --git a/Front/public/css/style.css b/Front/public/css/style.css
index a8b7c59..fd37614 100644
--- a/Front/public/css/style.css
+++ b/Front/public/css/style.css
@@ -1,812 +1,304 @@
-/* =================================================================
- RAÍZ Y VARIABLES DE TEMA
- ================================================================= */
+/* --- 1. Variables y Estilos Globales --- */
:root {
- --bg-primary: #05050c;
- --bg-secondary: #10101a;
- --text-primary: #f0f0f5;
- --text-secondary: #a0a0b0;
- --color-accent: #30D577;
- --color-accent-secondary: #00A9FF;
- --color-accent-hover: #28b463;
- --border-color: rgba(255, 255, 255, 0.1);
- --shadow-color: rgba(0, 0, 0, 0.5);
- --particle-color: #4a5568;
- --spotlight-color: rgba(48, 213, 119, 0.08);
+ --dark-bg: #121212;
+ --dark-card: #1C1C1E;
+ --dark-sidebar: #000000;
+ --text-primary: #FFFFFF;
+ --text-secondary: #A0A0A0;
+ --accent-green: #30D577;
+ --accent-blue: #00A9FF;
+ --border-color: #2c2c2e;
+ --font-family: 'Inter', sans-serif;
}
-html[data-theme='light'] {
- --bg-primary: #f5f5fa;
- --bg-secondary: #ffffff;
- --text-primary: #05050c;
- --text-secondary: #505060;
- --color-accent: #229954;
- --color-accent-secondary: #007acc;
- --color-accent-hover: #1e8449;
- --border-color: rgba(0, 0, 0, 0.1);
- --shadow-color: rgba(0, 0, 0, 0.1);
- --particle-color: #a0aec0;
- --spotlight-color: rgba(48, 213, 119, 0.1);
-}
-
-/* ... reset y estilos globales ... */
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
+* { margin: 0; padding: 0; box-sizing: border-box; }
-html {
- scroll-behavior: smooth;
-}
+html { scroll-behavior: smooth; }
body {
- font-family: 'Poppins', sans-serif;
- background-color: var(--bg-primary);
+ font-family: var(--font-family);
+ background-color: var(--dark-bg);
color: var(--text-primary);
- line-height: 1.7;
- transition: background-color 0.3s ease, color 0.3s ease;
- cursor: none;
-}
-
-body a,
-body button {
- cursor: none;
-}
-
-.container {
- width: 90%;
- max-width: 1100px;
- margin: 0 auto;
-}
-
-.background-container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- pointer-events: none;
-}
-
-#bg-canvas {
- position: absolute;
- top: 0;
- left: 0;
- width: 100% !important;
- height: 100% !important;
-}
-
-.spotlight {
- position: fixed;
- top: 0;
- left: 0;
- width: 600px;
- height: 600px;
- border-radius: 50%;
- background: radial-gradient(circle, var(--spotlight-color) 0%, transparent 60%);
- pointer-events: none;
- z-index: 2;
- transform: translate(-50%, -50%);
- transition: background 0.4s ease;
-}
-
-.cursor {
- width: 8px;
- height: 8px;
- background-color: var(--color-accent);
- border-radius: 50%;
- position: fixed;
- top: 0;
- left: 0;
- pointer-events: none;
- z-index: 9999;
- transform: translate(-50%, -50%);
- transition: transform 0.2s ease-out, width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-}
-
-.cursor.hovered {
- width: 50px;
- height: 50px;
- background-color: transparent;
- border: 1px solid var(--color-accent);
-}
-
-@media (pointer: coarse) {
-
- .cursor,
- .spotlight {
- display: none;
- }
-
- body,
- body a,
- body button {
- cursor: auto;
- }
}
-main {
- position: relative;
- z-index: 1;
-}
+.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
-.main-header {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 1000;
- padding: 1.5rem 0;
- transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
-}
-
-.main-header.scrolled {
- background-color: rgba(16, 16, 26, 0.8);
- backdrop-filter: blur(10px);
- box-shadow: 0 2px 10px var(--shadow-color);
-}
-
-html[data-theme='light'] .main-header.scrolled {
- background-color: rgba(255, 255, 255, 0.8);
-}
+h1, h2, h3, h4 { font-weight: 700; }
+h1 { font-size: 3.5rem; line-height: 1.2; letter-spacing: -1px; margin-bottom: 1.5rem; font-weight: 900; }
+h2 { font-size: 2.5rem; margin-bottom: 1rem; text-align: center; }
+h3 { font-size: 1.5rem; }
+a { text-decoration: none; color: inherit; }
+ul { list-style: none; }
-.main-header .container {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.logo {
- font-size: 1.6rem;
+/* --- 2. Componentes Reutilizables --- */
+.btn {
+ display: inline-block;
+ padding: 0.8rem 1.5rem;
+ border-radius: 0.5rem;
font-weight: 600;
- color: var(--text-primary);
- text-decoration: none;
-}
-
-.logo i {
- color: var(--color-accent);
-}
-
-.main-nav ul {
- display: flex;
- list-style: none;
- gap: 2.5rem;
-}
-
-.main-nav a,
-.header-actions .nav-link {
- display: flex;
- /* <-- AÑADE ESTA LÍNEA */
- align-items: center;
- /* <-- AÑADE ESTA LÍNEA */
- text-decoration: none;
- color: var(--text-secondary);
- font-weight: 400;
- position: relative;
- padding-bottom: 0.5rem;
- transition: color 0.3s ease;
-}
-
-.main-nav a:hover,
-.header-actions .nav-link:hover {
- color: var(--text-primary);
-}
-
-.main-nav a::after,
-.header-actions .nav-link::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 0;
- height: 2px;
- background-color: var(--color-accent);
- transition: width 0.3s ease;
-}
-
-.main-nav a:hover::after,
-.header-actions .nav-link:hover::after {
- width: 100%;
-}
-
-.theme-toggle {
- background: none;
border: none;
- color: var(--text-secondary);
- padding: 0.5rem;
- transition: color 0.3s ease, transform 0.3s ease;
-}
-
-.theme-toggle:hover {
- color: var(--text-primary);
- transform: rotate(15deg);
-}
-
-.theme-toggle .moon {
- display: none;
-}
-
-.theme-toggle .sun {
- display: block;
-}
-
-html[data-theme='dark'] .theme-toggle .moon {
- display: block;
+ cursor: pointer;
+ text-align: center;
+ transition: all 0.2s ease;
}
+.btn:hover { transform: translateY(-2px); opacity: 0.9; }
+.btn-green { background-color: var(--accent-green); color: #000; }
+.btn-blue { background-color: var(--accent-blue); color: #000; }
+.btn-secondary { background-color: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }
+.btn-large { padding: 1rem 2rem; font-size: 1.1rem; }
-html[data-theme='dark'] .theme-toggle .sun {
- display: none;
+.badge {
+ display: inline-block;
+ background-color: rgba(48, 213, 119, 0.1);
+ color: var(--accent-green);
+ padding: 0.5rem 1rem;
+ border-radius: 1.5rem;
+ font-size: 0.9rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ border: 1px solid var(--accent-green);
}
+.section-subtitle { text-align: center; color: var(--text-secondary); max-width: 600px; margin: 0 auto 3rem; font-size: 1.1rem; }
+/* --- 3. Barra de Navegación --- */
+.navbar {
+ background-color: rgba(18, 18, 18, 0.8);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ padding: 1rem 0;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ border-bottom: 1px solid var(--border-color);
+}
+.navbar .container { display: flex; justify-content: space-between; align-items: center; }
+.logo { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
+.logo i { color: var(--accent-green); }
+.nav-links { display: flex; gap: 2rem; }
+.nav-links a { color: var(--text-secondary); font-weight: 500; transition: color 0.2s; }
+.nav-links a:hover { color: var(--text-primary); }
+.nav-buttons { display: flex; gap: 1rem; }
+.nav-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 2rem; cursor: pointer; }
+
+/* --- 4. Sección Hero --- */
.hero {
+ min-height: 90vh;
display: flex;
align-items: center;
- justify-content: center;
- text-align: center;
- min-height: 100vh;
- padding: 5rem 0;
-}
-
-.hero-content {
- position: relative;
- z-index: 2;
-}
-
-.hero-title {
- font-size: clamp(2.5rem, 5vw, 4.5rem);
- font-weight: 700;
- line-height: 1.2;
- margin-bottom: 2rem;
-}
-
-.hero-subtitle {
- font-size: 1.2rem;
- max-width: 700px;
- margin: 0 auto 3rem;
- color: var(--text-secondary);
- font-weight: 300;
-}
-
-.highlight {
- background: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- text-fill-color: transparent;
-}
-
-.cta-button {
- display: inline-block;
- padding: 1rem 3rem;
- border-radius: 50px;
- text-decoration: none;
- font-weight: 500;
- transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
- border: 1px solid transparent;
- background-color: var(--color-accent);
- color: var(--bg-primary);
- white-space: nowrap;
-}
-
-.cta-button:hover {
- background-color: var(--color-accent-hover);
- transform: translateY(-5px);
- box-shadow: 0 10px 20px rgba(159, 85, 255, 0.2);
-}
-
-html[data-theme='light'] .cta-button:hover {
- background-color: var(--color-accent-hover);
- box-shadow: 0 8px 15px rgba(79, 70, 229, 0.3);
-}
-
-.content-section {
- padding: 6rem 0;
-}
-
-.section-title {
text-align: center;
- font-size: 2.5rem;
- margin-bottom: 4rem;
- font-weight: 700;
-}
-
-#philosophy {
- text-align: left;
+ background-image: linear-gradient(rgba(18, 18, 18, 0.8), rgba(18, 18, 18, 1)),
+ url('https://images.pexels.com/photos/1552242/pexels-photo-1552242.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
+ background-size: cover;
+ background-position: center;
}
-.manifesto-content {
- max-width: 900px;
- margin: 0 auto;
-}
+.hero-content { max-width: 800px; margin: 0 auto; }
+.hero-content p { font-size: 1.25rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 2.5rem; }
+.hero-content .btn i { margin-left: 0.5rem; }
-.manifesto-text .intro-line {
- font-size: 1rem;
- font-weight: 500;
- color: var(--color-accent);
- margin-bottom: 1rem;
- text-transform: uppercase;
- letter-spacing: 2px;
-}
+/* --- 5. Secciones Generales --- */
+section { padding: 6rem 0; }
-.manifesto-text .section-title {
- margin-bottom: 3rem;
- text-align: left;
-}
-
-.manifesto-paragraph {
- font-size: 1.2rem;
- line-height: 1.8;
- color: var(--text-secondary);
- font-weight: 300;
-}
-
-
-/* =================================================================
- FONDOS UNIFICADOS
- ================================================================= */
-.projects-section,
-.main-footer {
- background-color: var(--bg-secondary);
-}
-
-.services-grid {
+/* --- 6. Características --- */
+.features-section { background-color: #000; }
+.features-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
- gap: 2.5rem;
- justify-content: center;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ margin-top: 3rem;
}
-
-.service-card {
- background-color: var(--bg-secondary);
- /* Ahora hereda el fondo de la sección */
+.feature-card {
+ background-color: var(--dark-card);
+ padding: 2rem;
+ border-radius: 1rem;
border: 1px solid var(--border-color);
- padding: 2.5rem;
- border-radius: 16px;
- text-align: left;
- transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
}
-
-.service-card:hover {
- transform: translateY(-10px);
- box-shadow: 0 10px 25px var(--shadow-color);
- border-color: var(--color-accent);
-}
-
-.service-card .card-header {
+.feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
+.feature-icon {
+ font-size: 1.75rem;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
display: flex;
- align-items: baseline;
- gap: 1rem;
+ align-items: center;
+ justify-content: center;
margin-bottom: 1.5rem;
}
+.icon-blue { background-color: rgba(0, 169, 255, 0.1); color: var(--accent-blue); }
+.icon-green { background-color: rgba(48, 213, 119, 0.1); color: var(--accent-green); }
+.feature-card h3 { margin-bottom: 0.75rem; }
+.feature-card p { color: var(--text-secondary); line-height: 1.6; }
-.service-card h3 {
- font-size: 1.2rem;
- color: var(--color-accent);
- font-weight: 600;
-}
+/* --- 7. Showcase Section --- */
+.showcase-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
+.showcase-text h2 { text-align: left; }
+.showcase-text ul { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 1rem; }
+.showcase-text ul li { display: flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; }
+.showcase-text ul li i { color: var(--accent-green); }
+.showcase-image img { width: 100%; border-radius: 1rem; border: 1px solid var(--border-color); }
-.service-card h4 {
- font-size: 1.4rem;
- font-weight: 500;
- color: var(--text-primary);
-}
+/* =====================================================================================
+ 8. PRECIOS (DISEÑO MEJORADO COMPLETO)
+===================================================================================== */
-.service-card p {
- color: var(--text-secondary);
- font-weight: 300;
- font-size: 0.95rem;
+.pricing-section {
+ background-color: var(--dark-bg);
}
-/* =================================================================
- SECCIÓN PROYECTOS
- ================================================================= */
-.projects-grid {
+.pricing-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
- gap: 3rem;
-}
-
-.project-card-link {
- text-decoration: none;
- color: inherit;
- display: block;
-}
-
-.project-card {
- position: relative;
- border-radius: 16px;
- overflow: hidden;
- transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.project-card-link:hover .project-card {
- transform: scale(1.03);
-}
-
-.project-image-wrapper {
- width: 100%;
- padding-top: 65%;
- position: relative;
- overflow: hidden;
-}
-
-.project-image-wrapper img {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-
-.project-card-link:hover .project-image-wrapper img {
- transform: scale(1.1);
-}
-
-.project-info {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: 2rem;
- background: linear-gradient(to top, rgba(5, 5, 12, 0.95) 0%, transparent 100%);
- color: var(--text-primary);
-}
-
-.project-info h3 {
- font-size: 1.5rem;
- font-weight: 500;
- margin-bottom: 0.5rem;
-}
-
-.project-info p {
- font-size: 1rem;
- font-weight: 300;
- color: var(--text-secondary);
-}
-
-/* =================================================================
- SECCIÓN CONTACTO Y FOOTER
- ================================================================= */
-.cta-section {
- text-align: center;
- padding: 5rem 0;
-}
-
-.cta-section h2 {
- font-size: 2.5rem;
- margin-bottom: 2rem;
-}
-
-.cta-button-secondary {
- display: inline-block;
- padding: 1rem 3rem;
- border-radius: 50px;
- text-decoration: none;
- font-weight: 500;
- background-color: var(--color-accent);
- color: white;
- border: 1px solid var(--color-accent);
- transition: transform 0.3s ease, background-color 0.3s ease;
-}
-
-.cta-button-secondary:hover {
- background-color: var(--color-accent-hover);
- transform: translateY(-5px);
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+ align-items: stretch;
}
-.main-footer {
- padding: 3rem 0;
+/* ===== TARJETA GENERAL ===== */
+.pricing-card {
+ background-color: var(--dark-card);
+ padding: 2.5rem;
+ border-radius: 1rem;
+ border: 1px solid var(--border-color);
text-align: center;
- color: var(--text-secondary);
- border-top: 1px solid var(--border-color);
-}
-
-.footer-content {
display: flex;
flex-direction: column;
- align-items: center;
- gap: 1.5rem;
-}
-
-/* ... Animaciones y responsive ... */
-.animate-on-scroll {
- opacity: 0;
- transform: translateY(40px);
- transition: opacity 0.6s ease-out, transform 0.6s ease-out;
-}
-
-.animate-on-scroll.is-visible {
- opacity: 1;
- transform: translateY(0);
-}
-
-.service-card:nth-child(2) {
- transition-delay: 0.1s;
-}
-
-.service-card:nth-child(3) {
- transition-delay: 0.2s;
-}
-
-.project-card-link:nth-child(2) {
- transition-delay: 0.1s;
-}
-
-@media (max-width: 768px) {
- .main-nav {
- display: none;
- }
-
- .hero-title {
- font-size: 2.2rem;
- }
-
- .hero-subtitle {
- font-size: 1rem;
- }
-
- .section-title {
- font-size: 2.2rem;
- }
-
- .content-section {
- padding: 4rem 0;
- }
-
- .projects-grid {
- grid-template-columns: 1fr;
- }
-}
-
-/* =================================================================
- ESTILOS ADICIONALES
- ================================================================= */
-
-/* --- Insignia (Badge) --- */
-.badge {
- display: inline-block;
- padding: 0.5rem 1rem;
- border-radius: 50px;
- background-color: rgba(129, 140, 248, 0.1);
- /* Usando el color de acento con opacidad */
- color: var(--color-accent);
- font-size: 0.9rem;
- font-weight: 500;
- margin-bottom: 1.5rem;
- border: 1px solid rgba(129, 140, 248, 0.2);
+ height: 100%;
+ transition: all .2s ease;
}
-html[data-theme='light'] .badge {
- background-color: rgba(79, 70, 229, 0.1);
- border: 1px solid rgba(79, 70, 229, 0.2);
+.pricing-card:hover {
+ transform: translateY(-6px);
+ border-color: var(--accent-green);
}
-/* --- Ajustes a las tarjetas de servicio --- */
-.services-grid.fitlife-grid {
- display: grid;
- /* Aseguramos que sea grid */
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 2.5rem;
- justify-content: center;
+/* ===== TÍTULO ===== */
+.pricing-card h3 {
+ font-size: 1.3rem;
+ text-transform: uppercase;
+ letter-spacing: .5px;
+ color: var(--text-secondary);
+ margin-bottom: 1rem;
}
-.services-grid,
-.pricing-grid {
+/* ===== PRECIO EN UNA LÍNEA ===== */
+.pricing-card .price {
+ margin: 0 auto 2rem;
+ font-size: 2rem;
+ font-weight: 900;
+ display: flex;
justify-content: center;
+ align-items: baseline;
+ gap: .3rem;
}
-.card-header.fitlife-header {
- gap: 1.2rem;
- align-items: center;
-}
-
-.fitlife-header i {
- font-size: 1.8rem;
- color: var(--color-accent);
-}
-
-/* =================================================================
- ESTILOS PARA LA SECCIÓN SHOWCASE
- ================================================================= */
-.showcase-section {
- background-color: var(--bg-secondary);
- /* Fondo oscuro consistente */
+.pricing-card .price span {
+ font-size: 2.4rem;
+ color: #fff;
}
-.showcase-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 4rem;
- align-items: center;
+.pricing-card .price small {
+ font-size: 1.2rem;
+ font-weight: 600;
+ color: var(--text-secondary);
}
-.showcase-text .section-title {
+/* ===== FEATURES ===== */
+.pricing-card .features-list {
text-align: left;
- /* Alineamos el título a la izquierda */
- margin-bottom: 2rem;
-}
-
-.showcase-paragraph {
- font-size: 1.1rem;
- line-height: 1.8;
- color: var(--text-secondary);
- font-weight: 300;
margin-bottom: 2rem;
-}
-
-.feature-list {
- list-style: none;
- padding: 0;
- margin-bottom: 2.5rem;
display: flex;
flex-direction: column;
- gap: 1rem;
+ gap: .8rem;
+ flex-grow: 1;
}
-.feature-list li {
+.pricing-card .features-list li {
display: flex;
align-items: center;
- gap: 0.75rem;
- font-size: 1.05rem;
- font-weight: 400;
+ gap: .5rem;
+ font-size: 1rem;
}
-.feature-list li i {
- color: var(--color-accent);
- font-size: 1.2rem;
+.pricing-card .features-list li i {
+ color: var(--accent-green);
}
-.showcase-image img {
+/* ===== BOTÓN ===== */
+.pricing-card .btn {
width: 100%;
- border-radius: 16px;
- border: 1px solid var(--border-color);
- object-fit: cover;
-}
-
-/* --- Responsividad para la sección Showcase --- */
-@media (max-width: 992px) {
- .showcase-grid {
- grid-template-columns: 1fr;
- /* Colapsa a una sola columna */
- }
-
- .showcase-image {
- order: -1;
- margin-bottom: 3rem;
- }
-
- .showcase-text .section-title {
- text-align: center;
- }
-}
-
-/* --- Estilos para la sección de precios --- */
-.pricing-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 2rem;
- align-items: center;
-}
-
-.pricing-card {
- background-color: var(--bg-primary);
- border: 1px solid var(--border-color);
- padding: 2.5rem;
- border-radius: 16px;
- text-align: center;
- transition: transform 0.3s ease, box-shadow 0.3s ease;
+ margin-top: auto;
}
+/* ===== POPULAR ===== */
.pricing-card.popular {
- transform: scale(1.05);
- border-color: var(--color-accent);
+ border: 2px solid var(--accent-green);
position: relative;
}
-.pricing-card .badge {
+/* Badge centrado sin romper el diseño */
+.pricing-card.popular .badge {
+ background: var(--accent-green);
+ color: #000;
+ font-weight: 700;
+ padding: .4rem 1rem;
+ border-radius: 1rem;
+ font-size: .75rem;
position: absolute;
- top: -1.2rem;
+ top: -12px;
left: 50%;
transform: translateX(-50%);
- width: max-content;
-}
-
-.pricing-card h4 {
- font-size: 1.5rem;
- margin-bottom: 1rem;
-}
-
-.price {
- margin: 1.5rem 0;
-}
-
-.price span {
- font-size: 3rem;
- font-weight: 700;
-}
-
-.price small {
- font-size: 1rem;
- color: var(--text-secondary);
-}
-
-.features-list {
- list-style: none;
- text-align: left;
- margin-bottom: 2.5rem;
-}
-
-.features-list li {
- margin-bottom: 0.8rem;
- display: flex;
- align-items: center;
- gap: 0.8rem;
-}
-
-.features-list i {
- color: var(--color-accent);
-}
-
-.section-subtitle {
- text-align: center;
- max-width: 600px;
- margin: 0 auto 4rem;
- color: var(--text-secondary);
- font-weight: 300;
- position: relative;
- /* Asegura que no se superponga */
- z-index: 1;
+ border: none;
}
-.cta-container {
+/* --- 9. Otros Servicios --- */
+.other-services-section { background-color: var(--dark-card); }
+.other-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
+.service-card {
+ background-color: var(--dark-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ border: 1px solid var(--border-color);
text-align: center;
- margin-top: 3rem;
}
-
-/* --- Ajustes en el Header para el botón --- */
-.header-actions {
- display: flex;
- align-items: center;
- gap: 1rem;
-}
-
-.header-actions .cta-button {
- padding: 0.6rem 1.2rem;
- /* Botón de header más pequeño */
- font-size: 0.9rem;
-}
-
-/* --- Ajustes en el Footer --- */
-.main-footer {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 1rem;
-}
-
-.footer-logo {
- font-size: 1.8rem;
- margin-bottom: 0.5rem;
+.service-icon { font-size: 2rem; margin-bottom: 1.5rem; color: var(--accent-blue); }
+.service-card h3 { margin-bottom: 1rem; }
+.service-card p { color: var(--text-secondary); line-height: 1.6; }
+.cta-container { text-align: center; margin-top: 3rem; }
+
+/* --- 10. Pie de Página --- */
+.footer { background-color: #000; padding: 3rem 0; text-align: center; border-top: 1px solid var(--border-color); }
+.footer-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
+.footer .logo { margin-bottom: 0; }
+.footer p { color: var(--text-secondary); }
+.social-links { display: flex; gap: 1.5rem; }
+.social-links a { font-size: 1.5rem; color: var(--text-secondary); transition: color 0.2s; }
+.social-links a:hover { color: var(--text-primary); }
+
+/* --- 11. Responsividad --- */
+@media (max-width: 992px) {
+ h1 { font-size: 2.8rem; }
+ h2 { font-size: 2rem; }
+ .nav-links, .nav-buttons { display: none; }
+ .nav-toggle { display: block; }
+ .nav-links.active {
+ display: flex; flex-direction: column; position: absolute;
+ top: 100%; left: 0; width: 100%;
+ background-color: var(--dark-bg); padding: 1.5rem;
+ border-bottom: 1px solid var(--border-color); gap: 1.5rem;
+ }
+ .showcase-container { grid-template-columns: 1fr; }
+ .showcase-container .showcase-image { order: -1; }
+ .pricing-card.popular { transform: none; }
}
-.social-links {
- display: flex;
- gap: 1.5rem;
- font-size: 1.2rem;
- justify-content: center;
+@media (max-width: 768px) {
+ .pricing-grid { grid-template-columns: 1fr; }
}
-.social-links a {
- color: var(--text-secondary);
- transition: color 0.3s ease;
+@media (max-width: 576px) {
+ h1 { font-size: 2.2rem; }
+ .hero { min-height: 80vh; }
+ .features-grid { grid-template-columns: 1fr; }
+ .other-services-grid { grid-template-columns: 1fr; }
}
-
-.social-links a:hover {
- color: var(--text-primary);
-}
\ No newline at end of file
diff --git a/Front/public/index.html b/Front/public/index.html
index 639a624..ba3ad1f 100644
--- a/Front/public/index.html
+++ b/Front/public/index.html
@@ -1,231 +1,267 @@
-
-
+
FitLife - Rutinas y Localizador de Gyms
+
+
-
-
-
-
-
-
-
-
-
+
-
FitLife
-
-