Skip to content

Commit e18baa8

Browse files
JaviserranocJaviserranoc
committed
feat: UI changes
 - changes to the entire web and adding new page
1 parent 110545d commit e18baa8

58 files changed

Lines changed: 2186 additions & 589 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/css/divulgacion.css‎

Lines changed: 428 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/css/features.css‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,17 @@
1919
.features-item:nth-child(2) { animation-delay: 0.2s; }
2020
.features-item:nth-child(3) { animation-delay: 0.3s; }
2121
.features-item:nth-child(4) { animation-delay: 0.4s; }
22+
23+
.features-card-link {
24+
display: block;
25+
color: inherit;
26+
text-decoration: none;
27+
}
28+
29+
.features-card-link:focus-visible {
30+
outline: 2px solid #1d4ed8;
31+
outline-offset: 3px;
32+
}
2233

2334
/* Iconos centrados y modernos */
2435
.features-icon {
@@ -38,6 +49,11 @@
3849
transform: translateY(-5px) scale(1.1);
3950
box-shadow: 0 12px 40px rgba(59, 130, 246, 0.5);
4051
}
52+
53+
.features-card-link:hover .features-icon {
54+
transform: translateY(-5px) scale(1.1);
55+
box-shadow: 0 12px 40px rgba(59, 130, 246, 0.5);
56+
}
4157

4258
/* Ajuste de tamaño para iconos FontAwesome y SVG */
4359
.features-icon i {
@@ -62,6 +78,25 @@
6278
max-width: 300px;
6379
margin: 0 auto;
6480
}
81+
82+
.features-link-cta {
83+
display: inline-flex;
84+
align-items: center;
85+
gap: 0.35rem;
86+
margin-top: 1rem;
87+
color: #1d4ed8;
88+
font-weight: 700;
89+
font-size: 0.85rem;
90+
}
91+
92+
.features-link-cta::after {
93+
content: "->";
94+
transition: transform 0.2s ease;
95+
}
96+
97+
.features-card-link:hover .features-link-cta::after {
98+
transform: translateX(3px);
99+
}
65100

66101
/* Grid responsive */
67102
.features-grid {
@@ -87,4 +122,4 @@
87122
width: 28px;
88123
height: 28px;
89124
}
90-
}
125+
}

‎assets/css/hero-metrics.css‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
/* ============================================================
2+
Hero Metrics — Tarjetas de navegación con métricas destacadas
3+
============================================================ */
4+
5+
.hm-section {
6+
background: #ffffff;
7+
}
8+
9+
/* Encabezado */
10+
.hm-heading {
11+
color: #111827;
12+
}
13+
.hm-subheading {
14+
color: #6b7280;
15+
}
16+
17+
/* Grid — 4 columnas en desktop, 2 en tablet, 1 en mobile */
18+
.hm-grid {
19+
display: grid;
20+
grid-template-columns: repeat(4, 1fr);
21+
gap: 1.5rem;
22+
}
23+
@media (max-width: 1024px) {
24+
.hm-grid { grid-template-columns: repeat(2, 1fr); }
25+
}
26+
@media (max-width: 600px) {
27+
.hm-grid { grid-template-columns: 1fr; }
28+
}
29+
30+
/* Tarjeta base */
31+
.hm-card {
32+
position: relative;
33+
display: flex;
34+
flex-direction: column;
35+
background: #ffffff;
36+
border: 1px solid #e5e7eb;
37+
border-radius: 1rem;
38+
overflow: hidden;
39+
text-decoration: none;
40+
color: inherit;
41+
transition: transform 0.25s ease, box-shadow 0.25s ease;
42+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
43+
}
44+
.hm-card:hover {
45+
transform: translateY(-6px);
46+
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
47+
}
48+
49+
/* Barra de acento */
50+
.hm-card__accent {
51+
height: 5px;
52+
width: 100%;
53+
}
54+
.hm-card--blue .hm-card__accent { background: linear-gradient(90deg, #3b82f6, #2563eb); }
55+
.hm-card--indigo .hm-card__accent { background: linear-gradient(90deg, #6366f1, #4f46e5); }
56+
.hm-card--emerald .hm-card__accent { background: linear-gradient(90deg, #10b981, #059669); }
57+
.hm-card--orange .hm-card__accent { background: linear-gradient(90deg, #f97316, #ea580c); }
58+
59+
/* Cabecera: icono + métrica */
60+
.hm-card__header {
61+
display: flex;
62+
align-items: center;
63+
justify-content: space-between;
64+
padding: 1.25rem 1.5rem 0.75rem 1.5rem;
65+
}
66+
67+
/* Círculo del icono */
68+
.hm-card__icon-wrap {
69+
width: 52px;
70+
height: 52px;
71+
border-radius: 50%;
72+
display: flex;
73+
align-items: center;
74+
justify-content: center;
75+
flex-shrink: 0;
76+
}
77+
.hm-card--blue .hm-card__icon-wrap { background: #eff6ff; }
78+
.hm-card--indigo .hm-card__icon-wrap { background: #eef2ff; }
79+
.hm-card--emerald .hm-card__icon-wrap { background: #ecfdf5; }
80+
.hm-card--orange .hm-card__icon-wrap { background: #fff7ed; }
81+
82+
.hm-card__icon {
83+
font-size: 1.35rem;
84+
}
85+
.hm-card--blue .hm-card__icon { color: #2563eb; }
86+
.hm-card--indigo .hm-card__icon { color: #4f46e5; }
87+
.hm-card--emerald .hm-card__icon { color: #059669; }
88+
.hm-card--orange .hm-card__icon { color: #ea580c; }
89+
90+
/* Métrica */
91+
.hm-card__metric-wrap {
92+
text-align: right;
93+
}
94+
.hm-card__metric {
95+
display: block;
96+
font-size: 1.45rem;
97+
font-weight: 800;
98+
line-height: 1;
99+
}
100+
.hm-card--blue .hm-card__metric { color: #2563eb; }
101+
.hm-card--indigo .hm-card__metric { color: #4f46e5; }
102+
.hm-card--emerald .hm-card__metric { color: #059669; }
103+
.hm-card--orange .hm-card__metric { color: #ea580c; }
104+
105+
.hm-card__metric-label {
106+
display: block;
107+
font-size: 0.7rem;
108+
font-weight: 500;
109+
color: #9ca3af;
110+
text-transform: uppercase;
111+
letter-spacing: 0.05em;
112+
margin-top: 2px;
113+
}
114+
115+
/* Cuerpo */
116+
.hm-card__body {
117+
flex: 1;
118+
padding: 0.5rem 1.5rem 1rem 1.5rem;
119+
}
120+
.hm-card__title {
121+
font-size: 1.05rem;
122+
font-weight: 700;
123+
color: #111827;
124+
margin-bottom: 0.5rem;
125+
line-height: 1.3;
126+
}
127+
.hm-card__desc {
128+
font-size: 0.88rem;
129+
color: #6b7280;
130+
line-height: 1.55;
131+
}
132+
133+
/* Footer CTA */
134+
.hm-card__footer {
135+
padding: 0.75rem 1.5rem 1.25rem 1.5rem;
136+
border-top: 1px solid #f3f4f6;
137+
}
138+
.hm-card__cta {
139+
display: flex;
140+
align-items: center;
141+
gap: 0.4rem;
142+
font-size: 0.85rem;
143+
font-weight: 600;
144+
}
145+
.hm-card--blue .hm-card__cta { color: #2563eb; }
146+
.hm-card--indigo .hm-card__cta { color: #4f46e5; }
147+
.hm-card--emerald .hm-card__cta { color: #059669; }
148+
.hm-card--orange .hm-card__cta { color: #ea580c; }
149+
150+
.hm-card__cta-arrow {
151+
font-size: 0.75rem;
152+
transition: transform 0.2s ease;
153+
}
154+
.hm-card:hover .hm-card__cta-arrow {
155+
transform: translateX(4px);
156+
}
157+
158+
/* Animación de entrada */
159+
@keyframes hmFadeUp {
160+
from { opacity: 0; transform: translateY(24px); }
161+
to { opacity: 1; transform: translateY(0); }
162+
}
163+
.hm-card {
164+
animation: hmFadeUp 0.5s ease-out both;
165+
}
166+
.hm-card:nth-child(1) { animation-delay: 0.05s; }
167+
.hm-card:nth-child(2) { animation-delay: 0.12s; }
168+
.hm-card:nth-child(3) { animation-delay: 0.19s; }
169+
.hm-card:nth-child(4) { animation-delay: 0.26s; }

‎assets/css/hero.css‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,4 +157,75 @@
157157

158158
.btn-modern-secondary:hover::after {
159159
transform: translateX(4px);
160-
}
160+
}
161+
162+
/* ===== HERO SLIDESHOW ===== */
163+
.hero-slideshow-section {
164+
position: relative;
165+
width: 100%;
166+
}
167+
168+
.hero-slideshow-bg {
169+
position: absolute;
170+
inset: 0;
171+
z-index: 0;
172+
overflow: hidden;
173+
}
174+
175+
.hero-slide {
176+
position: absolute;
177+
inset: 0;
178+
background-size: cover;
179+
background-position: center;
180+
background-repeat: no-repeat;
181+
opacity: 0;
182+
transition: opacity 1.2s ease-in-out;
183+
}
184+
185+
.hero-slide.active {
186+
opacity: 1;
187+
}
188+
189+
.hero-slideshow-overlay {
190+
position: absolute;
191+
inset: 0;
192+
background: linear-gradient(
193+
to bottom,
194+
rgba(0, 20, 70, 0.70) 0%,
195+
rgba(0, 30, 80, 0.55) 100%
196+
);
197+
z-index: 1;
198+
}
199+
200+
/* Cuando hay slideshow, forzar fondo transparente en .hero */
201+
.hero-slideshow-section .hero {
202+
background-color: transparent !important;
203+
background-image: none !important;
204+
}
205+
206+
/* Dots de navegación */
207+
.hero-slideshow-dots {
208+
position: absolute;
209+
bottom: 1.5rem;
210+
left: 50%;
211+
transform: translateX(-50%);
212+
z-index: 20;
213+
display: flex;
214+
gap: 0.6rem;
215+
}
216+
217+
.hero-dot {
218+
width: 10px;
219+
height: 10px;
220+
border-radius: 50%;
221+
background: rgba(255, 255, 255, 0.35);
222+
border: 2px solid rgba(255, 255, 255, 0.6);
223+
cursor: pointer;
224+
transition: background 0.3s ease, transform 0.3s ease;
225+
padding: 0;
226+
}
227+
228+
.hero-dot.active {
229+
background: white;
230+
transform: scale(1.25);
231+
}

‎assets/css/pilotos.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
div {
22
max-width: none !important;
3-
text-align: center;
43
}
54

65
/* Custom CSS for Glassmorphism Effect */

0 commit comments

Comments
 (0)