diff --git a/assets/img/carousel/capacitacion.webp b/assets/img/carousel/capacitacion.webp
new file mode 100644
index 0000000..dafb06a
--- /dev/null
+++ b/assets/img/carousel/capacitacion.webp
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Técnicas Avanzadas
+
+
+
+
+
+
+ 1
+
+ 2
+
+ 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Materiales
+
+
+
+
+
+
+
+
+
+
+ ✓
+
+
+
+ Capacitación Continua
+ Técnicas nuevas • Tendencias • Desarrollo profesional
+
\ No newline at end of file
diff --git a/assets/img/carousel/crecimiento.webp b/assets/img/carousel/crecimiento.webp
new file mode 100644
index 0000000..a1e4918
--- /dev/null
+++ b/assets/img/carousel/crecimiento.webp
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Junior
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ★
+
+ Experta
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ LEAD
+
+
+
+
+ Líder
+
+
+
+
+
+
+
+ 5
+ AÑOS
+ CRECIMIENTO
+
+ Trayectoria
+ Exitosa
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inicio
+ 6m
+ 1a
+ 2a
+ 5a
+
+ Tu Crecimiento en Vanity
+
+
+
+
+
+
+
+
+
+
+
+ Tu carrera
+ en nuestras
+ manos
+ ✨ Crecimiento garantizado
+
\ No newline at end of file
diff --git a/assets/img/carousel/equipo-trabajo.webp b/assets/img/carousel/equipo-trabajo.webp
new file mode 100644
index 0000000..7f35a35
--- /dev/null
+++ b/assets/img/carousel/equipo-trabajo.webp
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Trabajo en Equipo
+ Colaboración • Apoyo • Crecimiento Conjunto
+
\ No newline at end of file
diff --git a/assets/img/carousel/hero/1.jpeg b/assets/img/carousel/hero/1.jpeg
new file mode 100644
index 0000000..54a5bc2
Binary files /dev/null and b/assets/img/carousel/hero/1.jpeg differ
diff --git a/assets/img/carousel/hero/2.jpeg b/assets/img/carousel/hero/2.jpeg
new file mode 100644
index 0000000..0712af6
Binary files /dev/null and b/assets/img/carousel/hero/2.jpeg differ
diff --git a/assets/img/carousel/hero/3.jpeg b/assets/img/carousel/hero/3.jpeg
new file mode 100644
index 0000000..68f8e4d
Binary files /dev/null and b/assets/img/carousel/hero/3.jpeg differ
diff --git a/assets/img/carousel/hero/4.jpeg b/assets/img/carousel/hero/4.jpeg
new file mode 100644
index 0000000..53e083c
Binary files /dev/null and b/assets/img/carousel/hero/4.jpeg differ
diff --git a/assets/img/carousel/hero/5.jpeg b/assets/img/carousel/hero/5.jpeg
new file mode 100644
index 0000000..eb6b573
Binary files /dev/null and b/assets/img/carousel/hero/5.jpeg differ
diff --git a/assets/img/carousel/hero/6.jpeg b/assets/img/carousel/hero/6.jpeg
new file mode 100644
index 0000000..16b7fd2
Binary files /dev/null and b/assets/img/carousel/hero/6.jpeg differ
diff --git a/assets/img/carousel/hero/7.jpeg b/assets/img/carousel/hero/7.jpeg
new file mode 100644
index 0000000..70f0865
Binary files /dev/null and b/assets/img/carousel/hero/7.jpeg differ
diff --git a/assets/img/carousel/hero/8.jpeg b/assets/img/carousel/hero/8.jpeg
new file mode 100644
index 0000000..2ca2826
Binary files /dev/null and b/assets/img/carousel/hero/8.jpeg differ
diff --git a/assets/img/carousel/hero/9.jpeg b/assets/img/carousel/hero/9.jpeg
new file mode 100644
index 0000000..cbc8c78
Binary files /dev/null and b/assets/img/carousel/hero/9.jpeg differ
diff --git a/assets/img/carousel/resultados.webp b/assets/img/carousel/resultados.webp
new file mode 100644
index 0000000..b9487d5
--- /dev/null
+++ b/assets/img/carousel/resultados.webp
@@ -0,0 +1,111 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Nail Art
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Perfección
+
+
+
+
+
+ Extensiones
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Impecable
+
+
+
+
+
+ Estilismo
+
+
+
+
+
+
+
+
+
+ Espectacular
+
+
+
+
+
+
+
+ Excelencia
+
+
+
+
+
+ 100%
+ Satisfacción
+
+
+
+
+
+
+
+
+ Cliente Feliz
+
+
+
+
+ Resultados que Nos Enorgullecen
+ Calidad • Precisión • Satisfacción total
+
\ No newline at end of file
diff --git a/assets/img/carousel/salon-ambiente.webp b/assets/img/carousel/salon-ambiente.webp
new file mode 100644
index 0000000..15c7fb6
--- /dev/null
+++ b/assets/img/carousel/salon-ambiente.webp
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ambiente Profesional Moderno
+
\ No newline at end of file
diff --git a/assets/img/favicon/android-chrome-192x192.png b/assets/img/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..c628f13
Binary files /dev/null and b/assets/img/favicon/android-chrome-192x192.png differ
diff --git a/assets/img/favicon/android-chrome-512x512.png b/assets/img/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000..770c83a
Binary files /dev/null and b/assets/img/favicon/android-chrome-512x512.png differ
diff --git a/assets/img/favicon/apple-touch-icon.png b/assets/img/favicon/apple-touch-icon.png
new file mode 100644
index 0000000..c0358e5
Binary files /dev/null and b/assets/img/favicon/apple-touch-icon.png differ
diff --git a/assets/img/favicon/favicon-16x16.png b/assets/img/favicon/favicon-16x16.png
new file mode 100644
index 0000000..4703f0f
Binary files /dev/null and b/assets/img/favicon/favicon-16x16.png differ
diff --git a/assets/img/favicon/favicon-32x32.png b/assets/img/favicon/favicon-32x32.png
new file mode 100644
index 0000000..7cea4c6
Binary files /dev/null and b/assets/img/favicon/favicon-32x32.png differ
diff --git a/assets/img/favicon/favicon.ico b/assets/img/favicon/favicon.ico
new file mode 100644
index 0000000..203b7db
Binary files /dev/null and b/assets/img/favicon/favicon.ico differ
diff --git a/assets/img/favicon/site.webmanifest b/assets/img/favicon/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/assets/img/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/assets/img/hero_equipo_2025Q3.webp b/assets/img/hero_equipo_2025Q3.webp
new file mode 100644
index 0000000..efedea4
--- /dev/null
+++ b/assets/img/hero_equipo_2025Q3.webp
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 💅
+
+
+
+
+
+
+ 👁️
+
+
+
+
+
+
+ 💇
+
+
+
+
+
+
+ 💄
+
+
+
+
+
+
+ 🧴
+
+
+
+
+
+ 👥
+
+
+
+ ⭐
+
+
+
+
+
+
+
+
+
+ Equipo Vanity - Profesionales en Belleza
+ Trabajando juntas para crear experiencias excepcionales
+
\ No newline at end of file
diff --git a/assets/img/logos/alma_bk.png b/assets/img/logos/alma_bk.png
new file mode 100644
index 0000000..dbc6efd
Binary files /dev/null and b/assets/img/logos/alma_bk.png differ
diff --git a/assets/img/logos/alma_bk.svg b/assets/img/logos/alma_bk.svg
new file mode 100644
index 0000000..0df371c
--- /dev/null
+++ b/assets/img/logos/alma_bk.svg
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/logos/alma_wh.png b/assets/img/logos/alma_wh.png
new file mode 100644
index 0000000..97aff6d
Binary files /dev/null and b/assets/img/logos/alma_wh.png differ
diff --git a/assets/img/logos/vanity_bk.png b/assets/img/logos/vanity_bk.png
new file mode 100644
index 0000000..fbffb1b
Binary files /dev/null and b/assets/img/logos/vanity_bk.png differ
diff --git a/assets/img/logos/vanity_bk.svg b/assets/img/logos/vanity_bk.svg
new file mode 100644
index 0000000..25d32d0
--- /dev/null
+++ b/assets/img/logos/vanity_bk.svg
@@ -0,0 +1,515 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/logos/vanity_wh.png b/assets/img/logos/vanity_wh.png
new file mode 100644
index 0000000..30d92a1
Binary files /dev/null and b/assets/img/logos/vanity_wh.png differ
diff --git a/assets/img/testimonials/adriana.jpeg b/assets/img/testimonials/adriana.jpeg
new file mode 100644
index 0000000..00c2ccc
Binary files /dev/null and b/assets/img/testimonials/adriana.jpeg differ
diff --git a/assets/img/testimonials/ame.jpeg b/assets/img/testimonials/ame.jpeg
new file mode 100644
index 0000000..1a5c982
Binary files /dev/null and b/assets/img/testimonials/ame.jpeg differ
diff --git a/assets/img/testimonials/blanquita.jpeg b/assets/img/testimonials/blanquita.jpeg
new file mode 100644
index 0000000..cf7a194
Binary files /dev/null and b/assets/img/testimonials/blanquita.jpeg differ
diff --git a/assets/img/testimonials/eunice.jpeg b/assets/img/testimonials/eunice.jpeg
new file mode 100644
index 0000000..0dddaa9
Binary files /dev/null and b/assets/img/testimonials/eunice.jpeg differ
diff --git a/assets/img/testimonials/itza.jpeg b/assets/img/testimonials/itza.jpeg
new file mode 100644
index 0000000..5fed231
Binary files /dev/null and b/assets/img/testimonials/itza.jpeg differ
diff --git a/assets/img/testimonials/karen.png b/assets/img/testimonials/karen.png
new file mode 100644
index 0000000..f11279d
Binary files /dev/null and b/assets/img/testimonials/karen.png differ
diff --git a/assets/img/testimonials/majo.jpeg b/assets/img/testimonials/majo.jpeg
new file mode 100644
index 0000000..14ef0fc
Binary files /dev/null and b/assets/img/testimonials/majo.jpeg differ
diff --git a/assets/img/testimonials/paola.jpeg b/assets/img/testimonials/paola.jpeg
new file mode 100644
index 0000000..918455c
Binary files /dev/null and b/assets/img/testimonials/paola.jpeg differ
diff --git a/assets/img/testimonials/placeholder.png b/assets/img/testimonials/placeholder.png
new file mode 100644
index 0000000..79855da
Binary files /dev/null and b/assets/img/testimonials/placeholder.png differ
diff --git a/assets/img/testimonials/sabina.jpeg b/assets/img/testimonials/sabina.jpeg
new file mode 100644
index 0000000..21e82be
Binary files /dev/null and b/assets/img/testimonials/sabina.jpeg differ
diff --git a/assets/img/testimonials/valeria.jpeg b/assets/img/testimonials/valeria.jpeg
new file mode 100644
index 0000000..ad40950
Binary files /dev/null and b/assets/img/testimonials/valeria.jpeg differ
diff --git a/css/animations.css b/css/animations.css
new file mode 100644
index 0000000..a9439a1
--- /dev/null
+++ b/css/animations.css
@@ -0,0 +1,375 @@
+/* ========================================
+ ANIMATIONS.CSS - Scroll Reveal Animations
+ ======================================== */
+
+/* Base animation classes */
+.animate-on-scroll {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.animate-on-scroll.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Different animation variants */
+.animate-fade-up {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.animate-fade-up.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.animate-fade-left {
+ opacity: 0;
+ transform: translateX(-50px);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.animate-fade-left.animate-in {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+.animate-fade-right {
+ opacity: 0;
+ transform: translateX(50px);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.animate-fade-right.animate-in {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+.animate-scale {
+ opacity: 0;
+ transform: scale(0.9);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.animate-scale.animate-in {
+ opacity: 1;
+ transform: scale(1);
+}
+
+/* Staggered animations for children */
+.animate-stagger {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.animate-stagger.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Delay variants for staggered animations */
+.animate-delay-1 {
+ transition-delay: 0.1s;
+}
+
+.animate-delay-2 {
+ transition-delay: 0.2s;
+}
+
+.animate-delay-3 {
+ transition-delay: 0.3s;
+}
+
+.animate-delay-4 {
+ transition-delay: 0.4s;
+}
+
+.animate-delay-5 {
+ transition-delay: 0.5s;
+}
+
+.animate-delay-6 {
+ transition-delay: 0.6s;
+}
+
+/* Section-specific animations */
+.benefits {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.benefits.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.profile {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
+}
+
+.profile.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.process {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
+}
+
+.process.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.faq {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
+}
+
+.faq.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.testimonials {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
+}
+
+.testimonials.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.cta-carousel {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
+}
+
+.cta-carousel.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Enhanced benefit cards animation */
+.benefit-card {
+ opacity: 0;
+ transform: translateY(30px) scale(0.95);
+ transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.benefit-card.animate-in {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+}
+
+/* Process steps animation */
+.process__step {
+ opacity: 0;
+ transform: translateY(40px);
+ transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.process__step.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* FAQ items animation */
+.faq__item {
+ opacity: 0;
+ transform: translateX(-30px);
+ transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.faq__item.animate-in {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+/* Section headers animation */
+.section-header {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.section-header.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Profile cards animation */
+.profile__requirements,
+.profile__desired {
+ opacity: 0;
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.profile__requirements {
+ transform: translateX(-40px);
+}
+
+.profile__desired {
+ transform: translateX(40px);
+}
+
+.profile__requirements.animate-in,
+.profile__desired.animate-in {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+/* Testimonial cards animation */
+.testimonial-slide {
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* CTA section specific animations */
+.cta-carousel__text {
+ opacity: 0;
+ transform: translateX(-40px);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.cta-carousel__text.animate-in {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+.cta-carousel__images {
+ opacity: 0;
+ transform: translateX(40px);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
+}
+
+.cta-carousel__images.animate-in {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+/* Stats animation */
+.stat-item {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.stat-item.animate-in {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+ .animate-on-scroll,
+ .animate-fade-up,
+ .animate-fade-left,
+ .animate-fade-right,
+ .animate-scale,
+ .animate-stagger,
+ .benefits,
+ .profile,
+ .process,
+ .faq,
+ .testimonials,
+ .cta-carousel,
+ .benefit-card,
+ .process__step,
+ .faq__item,
+ .section-header,
+ .profile__requirements,
+ .profile__desired,
+ .cta-carousel__text,
+ .cta-carousel__images,
+ .stat-item {
+ opacity: 1;
+ transform: none;
+ transition: none;
+ }
+}
+
+/* Enhanced entrance animations */
+@keyframes slideInFromBottom {
+ 0% {
+ opacity: 0;
+ transform: translateY(50px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeInScale {
+ 0% {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes slideInFromLeft {
+ 0% {
+ opacity: 0;
+ transform: translateX(-50px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideInFromRight {
+ 0% {
+ opacity: 0;
+ transform: translateX(50px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+/* Pulse animation for important elements */
+@keyframes pulse {
+ 0%, 100% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.05);
+ }
+}
+
+.animate-pulse {
+ animation: pulse 2s ease-in-out infinite;
+}
+
+/* Floating animation for decorative elements */
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+.animate-float {
+ animation: float 3s ease-in-out infinite;
+}
\ No newline at end of file
diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..ba19ab2
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,241 @@
+/* ========================================
+ BASE.CSS - Tokens, Reset, Typography
+ ======================================== */
+
+/* CSS Tokens */
+:root {
+ /* Colors - System Colors */
+ --color-primary: #4D3F3C;
+ --color-secondary: #A39660;
+ --color-text: #262626;
+ --color-emphasis: #46483B;
+
+ /* Custom Colors */
+ --color-beige: #D8D3C7;
+ --color-olive: #6E6F5F;
+ --color-bg: #F5F5F5;
+
+ /* UI Colors */
+ --color-surface: #ffffff;
+ --color-surface-2: #f8f8f8;
+ --color-muted: #6b7280;
+ --color-accent: #A39660;
+ --color-success: #065f46;
+ --color-error: #b91c1c;
+ --color-border: #e5e7eb;
+ --color-border-focus: color-mix(in oklab, var(--color-primary) 60%, white 40%);
+
+ /* Spacing */
+ --space-1: 0.5rem;
+ --space-2: 1rem;
+ --space-3: 1.5rem;
+ --space-4: 2rem;
+ --space-5: 3rem;
+ --space-6: 4rem;
+
+ /* Typography */
+ --font-family-sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+ --font-family-serif: "Playfair Display", Georgia, Cambria, "Times New Roman", Times, serif;
+ --font-size-sm: 0.875rem;
+ --font-size-base: 1rem;
+ --font-size-lg: 1.125rem;
+ --font-size-xl: 1.25rem;
+ --font-size-2xl: 1.5rem;
+ --font-size-3xl: 1.875rem;
+ --font-size-4xl: 2.25rem;
+ --line-height-tight: 1.25;
+ --line-height-normal: 1.5;
+ --line-height-relaxed: 1.75;
+
+ /* Design tokens */
+ --radius: 14px;
+ --radius-sm: 8px;
+ --radius-lg: 20px;
+ --radius-full: 9999px;
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+ --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
+ --transition: 0.2s ease-in-out;
+
+ /* Layout */
+ --container-max-width: 1200px;
+ --header-height: 80px;
+}
+
+/* CSS Reset */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+ scroll-behavior: smooth;
+}
+
+html {
+ font-size: 16px;
+ -webkit-text-size-adjust: 100%;
+}
+
+body {
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-base);
+ line-height: var(--line-height-normal);
+ color: var(--color-text);
+ background-color: var(--color-bg);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Remove default margins */
+h1, h2, h3, h4, h5, h6,
+p, ul, ol, dl, dd,
+blockquote, figure, fieldset, legend {
+ margin: 0;
+}
+
+/* Images */
+img, picture, video, canvas, svg {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
+/* Forms */
+input, button, textarea, select {
+ font: inherit;
+ letter-spacing: inherit;
+}
+
+button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+}
+
+/* Lists */
+ul, ol {
+ padding: 0;
+ list-style: none;
+}
+
+/* Links */
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+/* Focus styles */
+:focus-visible {
+ outline: 2px solid var(--color-border-focus);
+ outline-offset: 2px;
+}
+
+/* Typography */
+.h1, h1 {
+ font-family: var(--font-family-serif);
+ font-size: var(--font-size-4xl);
+ font-weight: 700;
+ line-height: var(--line-height-tight);
+ margin-bottom: var(--space-4);
+}
+
+.h2, h2 {
+ font-family: var(--font-family-serif);
+ font-size: var(--font-size-3xl);
+ font-weight: 600;
+ line-height: var(--line-height-tight);
+ margin-bottom: var(--space-3);
+}
+
+.h3, h3 {
+ font-size: var(--font-size-xl);
+ font-weight: 600;
+ line-height: var(--line-height-tight);
+ margin-bottom: var(--space-2);
+}
+
+.h4, h4 {
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ line-height: var(--line-height-normal);
+ margin-bottom: var(--space-2);
+}
+
+p {
+ margin-bottom: var(--space-3);
+ line-height: var(--line-height-relaxed);
+}
+
+/* Utilities */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+.container {
+ max-width: var(--container-max-width);
+ margin: 0 auto;
+ padding: 0 var(--space-4);
+}
+
+/* Responsive breakpoints */
+@media (max-width: 768px) {
+ :root {
+ --font-size-4xl: 2rem;
+ --font-size-3xl: 1.75rem;
+ }
+
+ .container {
+ padding: 0 var(--space-3);
+ }
+
+ .h1, h1 {
+ font-size: var(--font-size-4xl);
+ }
+
+ .h2, h2 {
+ font-size: var(--font-size-3xl);
+ }
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 0 var(--space-2);
+ }
+}
+
+/* Accessibility */
+@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;
+ }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+ :root {
+ --color-border: #000000;
+ --shadow: none;
+ }
+}
\ No newline at end of file
diff --git a/css/carousel.css b/css/carousel.css
new file mode 100644
index 0000000..00ef07d
--- /dev/null
+++ b/css/carousel.css
@@ -0,0 +1,412 @@
+/* ========================================
+ CAROUSEL.CSS - CTA Section with Image Carousel
+ ======================================== */
+
+/* CTA Carousel Section */
+.cta-carousel {
+ padding: var(--space-6) 0;
+ background: linear-gradient(135deg, var(--color-surface) 0%, white 100%);
+ position: relative;
+ overflow: hidden;
+}
+
+.cta-carousel::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f5e6f5' fill-opacity='0.3'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ pointer-events: none;
+}
+
+.cta-carousel__content {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-5);
+ align-items: center;
+ position: relative;
+ z-index: 1;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 0 var(--space-4);
+}
+
+@media (min-width: 1024px) {
+ .cta-carousel__content {
+ grid-template-columns: 1fr;
+ gap: var(--space-6);
+ align-items: center;
+ justify-items: center;
+ text-align: center;
+ max-width: 1000px;
+ }
+}
+
+/* CTA Text Content */
+.cta-carousel__text {
+ text-align: center;
+ max-width: 100%;
+}
+
+@media (min-width: 1024px) {
+ .cta-carousel__text {
+ text-align: center;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+}
+
+.cta-carousel__text h2 {
+ font-size: clamp(2rem, 4vw, 2.5rem);
+ color: var(--color-primary);
+ margin-bottom: var(--space-3);
+ line-height: var(--line-height-tight);
+}
+
+.cta-carousel__text p {
+ font-size: var(--font-size-lg);
+ color: var(--color-muted);
+ margin-bottom: var(--space-4);
+ line-height: var(--line-height-relaxed);
+}
+
+/* Stats Section */
+.cta-carousel__stats {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: var(--space-3);
+ margin-bottom: var(--space-4);
+ padding: var(--space-4);
+ background: rgba(255, 255, 255, 0.8);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+}
+
+@media (max-width: 480px) {
+ .cta-carousel__stats {
+ grid-template-columns: 1fr;
+ gap: var(--space-2);
+ padding: var(--space-3);
+ }
+}
+
+.stat-item {
+ text-align: center;
+}
+
+.stat-number {
+ display: block;
+ font-size: var(--font-size-3xl);
+ font-weight: bold;
+ color: var(--color-primary);
+ line-height: 1;
+ margin-bottom: 0.25rem;
+}
+
+.stat-label {
+ font-size: var(--font-size-sm);
+ color: var(--color-muted);
+ font-weight: 500;
+}
+
+/* CTA Actions */
+.cta-carousel__actions {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-4);
+ align-items: center;
+}
+
+@media (min-width: 640px) {
+ .cta-carousel__actions {
+ flex-direction: row;
+ justify-content: center;
+ gap: var(--space-5);
+ }
+}
+
+@media (min-width: 1024px) {
+ .cta-carousel__actions {
+ justify-content: center;
+ }
+}
+
+/* Image Carousel Container */
+.cta-carousel__images {
+ position: relative;
+ max-width: 500px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.image-carousel {
+ position: relative;
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ box-shadow: var(--shadow-lg);
+ background: white;
+}
+
+/* Carousel Track */
+.carousel-track {
+ position: relative;
+ width: 100%;
+ height: 400px;
+}
+
+.carousel-slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out;
+ display: flex;
+ flex-direction: column;
+}
+
+.carousel-slide.active {
+ opacity: 1;
+}
+
+.carousel-slide img {
+ width: 100%;
+ height: 70%;
+ object-fit: cover;
+ display: block;
+}
+
+/* Slide Captions */
+.slide-caption {
+ flex: 1;
+ padding: var(--space-3);
+ background: white;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+}
+
+.slide-caption h4 {
+ margin: 0 0 0.5rem 0;
+ color: var(--color-primary);
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+}
+
+.slide-caption p {
+ margin: 0;
+ color: var(--color-muted);
+ font-size: var(--font-size-sm);
+ line-height: var(--line-height-normal);
+}
+
+/* Carousel Controls */
+.carousel-btn {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background: rgba(255, 255, 255, 0.9);
+ border: none;
+ border-radius: 50%;
+ width: 48px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: var(--transition);
+ color: var(--color-primary);
+ box-shadow: var(--shadow);
+ z-index: 2;
+}
+
+.carousel-btn:hover {
+ background: white;
+ color: var(--color-primary-hover);
+ transform: translateY(-50%) scale(1.1);
+}
+
+.carousel-btn:active {
+ transform: translateY(-50%) scale(0.95);
+}
+
+.carousel-btn--prev {
+ left: var(--space-2);
+}
+
+.carousel-btn--next {
+ right: var(--space-2);
+}
+
+.carousel-btn svg {
+ width: 20px;
+ height: 20px;
+}
+
+/* Carousel Indicators */
+.carousel-indicators {
+ position: absolute;
+ bottom: var(--space-2);
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: var(--space-1);
+ z-index: 2;
+}
+
+.carousel-indicator {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ border: none;
+ background: rgba(255, 255, 255, 0.5);
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.carousel-indicator:hover {
+ background: rgba(255, 255, 255, 0.8);
+}
+
+.carousel-indicator.active {
+ background: white;
+ box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+/* Carousel Touch/Swipe Support */
+.carousel-track {
+ touch-action: pan-y;
+ user-select: none;
+}
+
+.carousel-slide {
+ pointer-events: none;
+}
+
+.carousel-slide.active {
+ pointer-events: auto;
+}
+
+/* Loading State */
+.carousel-slide img {
+ background: var(--color-surface);
+ position: relative;
+}
+
+.carousel-slide img:not([src]) {
+ background: linear-gradient(90deg, var(--color-surface) 25%, rgba(255,255,255,0.5) 50%, var(--color-surface) 75%);
+ background-size: 200% 100%;
+ animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+}
+
+/* Auto-play indicator */
+.carousel-progress {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 3px;
+ background: var(--color-primary);
+ transition: width 0.1s ease-out;
+ z-index: 2;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .cta-carousel {
+ padding: var(--space-5) 0;
+ }
+
+ .cta-carousel__content {
+ gap: var(--space-4);
+ }
+
+ .carousel-track {
+ height: 320px;
+ }
+
+ .carousel-btn {
+ width: 40px;
+ height: 40px;
+ }
+
+ .carousel-btn svg {
+ width: 16px;
+ height: 16px;
+ }
+
+ .carousel-btn--prev {
+ left: var(--space-1);
+ }
+
+ .carousel-btn--next {
+ right: var(--space-1);
+ }
+
+ .slide-caption {
+ padding: var(--space-2);
+ }
+
+ .slide-caption h4 {
+ font-size: var(--font-size-base);
+ }
+}
+
+@media (max-width: 480px) {
+ .carousel-track {
+ height: 280px;
+ }
+
+ .cta-carousel__actions {
+ gap: var(--space-2);
+ }
+
+ .cta-carousel__actions .btn {
+ width: 100%;
+ max-width: 280px;
+ }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+ .carousel-btn {
+ background: white;
+ border: 2px solid var(--color-primary);
+ }
+
+ .carousel-indicator {
+ border: 1px solid var(--color-primary);
+ }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ .carousel-slide {
+ transition: none;
+ }
+
+ .carousel-btn {
+ transition: none;
+ }
+
+ .carousel-indicator {
+ transition: none;
+ }
+
+ /* Disable auto-play if reduced motion is preferred */
+ .carousel-progress {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/css/components.css b/css/components.css
new file mode 100644
index 0000000..92ce575
--- /dev/null
+++ b/css/components.css
@@ -0,0 +1,821 @@
+/* ========================================
+ COMPONENTS.CSS - Buttons, Cards, Forms
+ ======================================== */
+
+/* Buttons */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.875rem 1.25rem;
+ border-radius: var(--radius-full);
+ border: 1px solid transparent;
+ gap: 0.5rem;
+ font-weight: 600;
+ font-size: var(--font-size-base);
+ text-decoration: none;
+ transition: var(--transition);
+ cursor: pointer;
+ min-height: 44px; /* iOS touch target */
+ min-width: 44px;
+ text-align: center;
+}
+
+.btn:hover {
+ text-decoration: none;
+ transform: translateY(-1px);
+}
+
+.btn:active {
+ transform: translateY(0);
+}
+
+.btn--primary {
+ background: var(--color-primary);
+ color: white;
+ border-color: var(--color-primary);
+}
+
+.btn--primary:hover {
+ background: var(--color-primary-hover);
+ border-color: var(--color-primary-hover);
+}
+
+.btn--ghost {
+ background: transparent;
+ border-color: var(--color-border);
+ color: var(--color-text);
+}
+
+.btn--ghost:hover {
+ background: var(--color-surface);
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+}
+
+.btn--lg {
+ padding: 1rem 2rem;
+ font-size: var(--font-size-lg);
+}
+
+.btn--full {
+ width: 100%;
+}
+
+/* Benefit Cards */
+.benefit-card {
+ background: white;
+ padding: var(--space-4);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ text-align: center;
+ transition: var(--transition);
+}
+
+.benefit-card:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+.benefit-card__icon {
+ font-size: 3rem;
+ margin-bottom: var(--space-3);
+ display: block;
+}
+
+.benefit-card h3 {
+ color: var(--color-primary);
+ margin-bottom: var(--space-2);
+ font-size: var(--font-size-xl);
+}
+
+.benefit-card p {
+ color: var(--color-muted);
+ margin: 0;
+ line-height: var(--line-height-relaxed);
+}
+
+/* Profile Cards */
+.profile__requirements,
+.profile__desired {
+ background: white;
+ padding: var(--space-4);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+}
+
+.profile__requirements h3 {
+ color: var(--color-primary);
+ border-bottom: 2px solid var(--color-primary);
+ padding-bottom: var(--space-2);
+}
+
+.profile__desired h3 {
+ color: var(--color-accent);
+ border-bottom: 2px solid var(--color-accent);
+ padding-bottom: var(--space-2);
+}
+
+/* Checklists */
+.checklist {
+ list-style: none;
+ padding: 0;
+}
+
+.checklist li {
+ position: relative;
+ padding: var(--space-2) 0 var(--space-2) var(--space-4);
+ border-bottom: 1px solid var(--color-border);
+}
+
+.checklist li:last-child {
+ border-bottom: none;
+}
+
+.checklist li::before {
+ content: "✓";
+ position: absolute;
+ left: 0;
+ top: var(--space-2);
+ color: var(--color-primary);
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.checklist--secondary li::before {
+ color: var(--color-accent);
+}
+
+/* Process Steps */
+.process__step {
+ text-align: center;
+ position: relative;
+}
+
+.process__number {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ background: var(--color-primary);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--font-size-xl);
+ font-weight: bold;
+ margin: 0 auto var(--space-3);
+ position: relative;
+ z-index: 2;
+}
+
+.process__content h3 {
+ color: var(--color-primary);
+ margin-bottom: var(--space-2);
+}
+
+.process__content p {
+ color: var(--color-muted);
+ margin: 0;
+ font-size: var(--font-size-sm);
+}
+
+/* Process timeline connection (desktop) */
+@media (min-width: 1024px) {
+ .process__step:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ top: 30px;
+ left: calc(50% + 30px);
+ right: calc(-50% + 30px);
+ height: 2px;
+ background: var(--color-border);
+ z-index: 1;
+ }
+}
+
+/* FAQ Items - Elegant & Dynamic */
+.faq__item {
+ background: white;
+ border-radius: var(--radius-lg);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ overflow: hidden;
+ border: 1px solid rgba(163, 150, 96, 0.1);
+ transition: all 0.3s ease;
+ position: relative;
+ margin-bottom: var(--space-3);
+}
+
+.faq__item::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
+ transform: scaleX(0);
+ transition: transform 0.3s ease;
+ transform-origin: left;
+}
+
+.faq__item:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+ border-color: var(--color-primary);
+}
+
+.faq__item:hover::before {
+ transform: scaleX(1);
+}
+
+.faq__question {
+ background: white;
+ padding: var(--space-4) var(--space-5);
+ cursor: pointer;
+ font-weight: 600;
+ font-size: var(--font-size-lg);
+ color: var(--color-text);
+ border: none;
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.faq__question::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(163, 150, 96, 0.1), transparent);
+ transition: left 0.6s ease;
+}
+
+.faq__question:hover::before {
+ left: 100%;
+}
+
+.faq__question:hover {
+ background: linear-gradient(135deg, rgba(163, 150, 96, 0.05) 0%, white 100%);
+ color: var(--color-primary);
+}
+
+.faq__question::after {
+ content: "+";
+ font-size: 2em;
+ font-weight: 300;
+ color: var(--color-primary);
+ transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background: rgba(163, 150, 96, 0.1);
+ flex-shrink: 0;
+}
+
+.faq__question:hover::after {
+ background: var(--color-primary);
+ color: white;
+ transform: scale(1.1);
+}
+
+.faq__item[open] .faq__question::after {
+ transform: rotate(45deg) scale(1.1);
+ background: var(--color-primary);
+ color: white;
+}
+
+.faq__item[open] .faq__question {
+ background: linear-gradient(135deg, rgba(163, 150, 96, 0.08) 0%, white 100%);
+ color: var(--color-primary);
+ border-bottom: 1px solid rgba(163, 150, 96, 0.2);
+}
+
+.faq__answer {
+ padding: 0 var(--space-5) var(--space-4);
+ color: var(--color-text);
+ line-height: var(--line-height-relaxed);
+ background: linear-gradient(180deg, rgba(163, 150, 96, 0.02) 0%, white 100%);
+ position: relative;
+}
+
+.faq__answer::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: var(--space-5);
+ right: var(--space-5);
+ height: 1px;
+ background: linear-gradient(90deg, transparent, rgba(163, 150, 96, 0.3), transparent);
+}
+
+.faq__answer p {
+ margin: 0;
+ font-size: var(--font-size-base);
+ animation: fadeInUp 0.5s ease forwards;
+ opacity: 0;
+ transform: translateY(10px);
+}
+
+.faq__item[open] .faq__answer p {
+ animation: fadeInUp 0.5s ease forwards;
+}
+
+@keyframes fadeInUp {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Enhanced text styling within FAQ answers */
+.faq__answer strong {
+ color: var(--color-primary);
+ font-weight: 600;
+}
+
+.faq__answer em {
+ color: var(--color-emphasis);
+ font-style: italic;
+}
+
+.faq__answer u {
+ color: var(--color-secondary);
+ text-decoration: underline;
+ text-decoration-color: var(--color-primary);
+ text-decoration-thickness: 2px;
+ text-underline-offset: 3px;
+}
+
+/* Responsive FAQ adjustments */
+@media (max-width: 768px) {
+ .faq__question {
+ padding: var(--space-3) var(--space-4);
+ font-size: var(--font-size-base);
+ }
+
+ .faq__answer {
+ padding: 0 var(--space-4) var(--space-3);
+ }
+
+ .faq__question::after {
+ font-size: 1.5em;
+ width: 28px;
+ height: 28px;
+ }
+}
+
+/* Testimonial Cards */
+.testimonial-card {
+ background: white;
+ padding: var(--space-6) var(--space-4);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ display: flex !important;
+ flex-direction: column !important;
+ height: 100%;
+ width: 100%;
+ text-align: center !important;
+ align-items: center !important;
+ justify-content: flex-start !important;
+ gap: var(--space-4);
+ margin: 0;
+}
+
+.testimonial-card__author {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-3);
+ order: 1;
+ width: 100%;
+}
+
+.testimonial-card__author img {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid #f0f0f0;
+}
+
+.testimonial-card__author div {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-1);
+}
+
+.testimonial-card__author cite {
+ font-weight: 700;
+ color: var(--color-text);
+ font-style: normal;
+ display: block;
+ font-size: 1.25rem;
+ margin: 0;
+}
+
+.testimonial-card__author span {
+ color: var(--color-muted);
+ font-size: var(--font-size-sm);
+ display: block;
+ font-weight: 500;
+ margin: 0;
+}
+
+.testimonial-card__content {
+ order: 2;
+ width: 100%;
+ max-width: 100%;
+ text-align: center;
+ padding: 0 var(--space-2);
+}
+
+.testimonial-card__content p {
+ color: var(--color-muted);
+ font-style: italic;
+ line-height: var(--line-height-relaxed);
+ margin: 0;
+ font-size: 1.1rem;
+ max-width: none;
+}
+
+/* Form Components */
+.field {
+ margin-bottom: var(--space-4);
+}
+
+.field label {
+ display: block;
+ font-weight: 600;
+ color: var(--color-text);
+ margin-bottom: var(--space-1);
+ font-size: var(--font-size-sm);
+}
+
+.field input,
+.field select,
+.field textarea {
+ width: 100%;
+ padding: 0.875rem;
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius);
+ background: white;
+ font-size: 16px; /* Prevent zoom on iOS */
+ transition: var(--transition);
+}
+
+.field input:focus,
+.field select:focus,
+.field textarea:focus {
+ outline: 2px solid var(--color-border-focus);
+ outline-offset: 2px;
+ border-color: var(--color-primary);
+}
+
+.field textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+.field select {
+ cursor: pointer;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ appearance: none;
+}
+
+.error {
+ color: var(--color-error);
+ font-size: var(--font-size-sm);
+ margin-top: 0.25rem;
+ display: block;
+ min-height: 1.2em;
+}
+
+.hint {
+ color: var(--color-muted);
+ font-size: var(--font-size-sm);
+ margin-top: 0.25rem;
+ display: block;
+}
+
+/* Checkbox groups */
+.checkbox-group {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: var(--space-2);
+ margin-top: var(--space-2);
+}
+
+.checkbox-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-2);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-sm);
+ cursor: pointer;
+ transition: var(--transition);
+ font-weight: normal;
+}
+
+.checkbox-item:hover {
+ background: var(--color-surface);
+ border-color: var(--color-primary);
+}
+
+.checkbox-item input {
+ width: auto;
+ margin: 0;
+ accent-color: var(--color-primary);
+}
+
+.checkbox-item input:checked + span {
+ color: var(--color-primary);
+ font-weight: 600;
+}
+
+/* Single checkbox (consent) */
+.field.checkbox {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-2);
+ margin-bottom: var(--space-4);
+}
+
+.field.checkbox input {
+ width: auto;
+ margin: 0;
+ margin-top: 0.25rem;
+ accent-color: var(--color-primary);
+}
+
+.field.checkbox label {
+ margin: 0;
+ font-weight: normal;
+ line-height: var(--line-height-relaxed);
+ font-size: var(--font-size-sm);
+}
+
+.field.checkbox label a {
+ color: var(--color-primary);
+ text-decoration: underline;
+}
+
+/* File input */
+input[type="file"] {
+ padding: 0.5rem;
+ border: 2px dashed var(--color-border);
+ background: var(--color-surface);
+}
+
+input[type="file"]:focus {
+ border-color: var(--color-primary);
+ background: white;
+}
+
+/* Form validation states */
+.field--error input,
+.field--error select,
+.field--error textarea {
+ border-color: var(--color-error);
+}
+
+.field--success input,
+.field--success select,
+.field--success textarea {
+ border-color: var(--color-success);
+}
+
+/* Loading states */
+.btn--loading {
+ position: relative;
+ color: transparent;
+}
+
+.btn--loading::after {
+ content: "";
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 2px solid transparent;
+ border-top-color: currentColor;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+@keyframes spin {
+ to {
+ transform: translate(-50%, -50%) rotate(360deg);
+ }
+}
+
+/* Mobile specific adjustments */
+@media (max-width: 768px) {
+ .btn {
+ padding: 0.75rem 1rem;
+ }
+
+ .btn--lg {
+ padding: 0.875rem 1.5rem;
+ }
+
+ .checkbox-group {
+ grid-template-columns: 1fr;
+ }
+
+ .benefit-card,
+ .testimonial-card,
+ .profile__requirements,
+ .profile__desired {
+ padding: var(--space-3);
+ }
+
+ .process__number {
+ width: 50px;
+ height: 50px;
+ font-size: var(--font-size-lg);
+ }
+}
+
+/* High contrast mode adjustments */
+@media (prefers-contrast: high) {
+ .btn {
+ border-width: 2px;
+ }
+
+ .benefit-card,
+ .testimonial-card,
+ .faq__item,
+ .profile__requirements,
+ .profile__desired {
+ border: 1px solid var(--color-border);
+ }
+}
+
+/* ========================================
+ PRIVACY POLICY STYLES
+ ======================================== */
+
+/* Privacy Policy */
+.privacy-policy {
+ padding: 4rem 0 6rem;
+ background: var(--color-bg-secondary);
+}
+
+.privacy-policy__content {
+ max-width: 800px;
+ margin: 0 auto;
+ background: white;
+ border-radius: var(--radius-lg);
+ padding: 3rem;
+ box-shadow: var(--shadow-lg);
+}
+
+.privacy-policy__header {
+ text-align: center;
+ margin-bottom: 3rem;
+ padding-bottom: 2rem;
+ border-bottom: 1px solid var(--color-border-light);
+}
+
+.privacy-policy__title {
+ font-family: var(--font-heading);
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: var(--color-primary);
+ margin-bottom: 0.5rem;
+}
+
+.privacy-policy__subtitle {
+ font-size: 1.25rem;
+ color: var(--color-text-muted);
+ font-weight: 600;
+}
+
+.privacy-policy__body {
+ line-height: 1.8;
+}
+
+.privacy-policy__intro {
+ font-size: 1.125rem;
+ margin-bottom: 2.5rem;
+ padding: 1.5rem;
+ background: var(--color-bg-tertiary);
+ border-radius: var(--radius-md);
+ border-left: 4px solid var(--color-primary);
+}
+
+.privacy-policy__section {
+ margin-bottom: 2.5rem;
+}
+
+.privacy-policy__section h2 {
+ font-family: var(--font-heading);
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--color-heading);
+ margin-bottom: 1rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 2px solid var(--color-primary);
+}
+
+.privacy-policy__section p {
+ margin-bottom: 1rem;
+ color: var(--color-text);
+}
+
+.privacy-policy__list {
+ margin-left: 1.5rem;
+ margin-bottom: 1rem;
+}
+
+.privacy-policy__list li {
+ margin-bottom: 0.5rem;
+ color: var(--color-text);
+}
+
+.privacy-policy__link {
+ color: var(--color-primary);
+ text-decoration: underline;
+ font-weight: 600;
+ transition: var(--transition);
+}
+
+.privacy-policy__link:hover {
+ color: var(--color-primary-hover);
+ text-decoration: none;
+}
+
+.privacy-policy__footer {
+ margin-top: 3rem;
+ padding-top: 2rem;
+ border-top: 1px solid var(--color-border-light);
+ text-align: center;
+}
+
+.privacy-policy__updated {
+ color: var(--color-text-muted);
+ margin-bottom: 1.5rem;
+}
+
+.privacy-policy__actions {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+/* Mobile Responsiveness for Privacy Policy */
+@media (max-width: 768px) {
+ .privacy-policy {
+ padding: 2rem 0 4rem;
+ }
+
+ .privacy-policy__content {
+ margin: 0 1rem;
+ padding: 2rem 1.5rem;
+ }
+
+ .privacy-policy__title {
+ font-size: 2rem;
+ }
+
+ .privacy-policy__subtitle {
+ font-size: 1.125rem;
+ }
+
+ .privacy-policy__intro {
+ font-size: 1rem;
+ padding: 1rem;
+ }
+
+ .privacy-policy__section h2 {
+ font-size: 1.25rem;
+ }
+
+ .privacy-policy__actions {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .privacy-policy__actions .btn {
+ width: 100%;
+ max-width: 280px;
+ }
+}
\ No newline at end of file
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 0000000..9a4ab47
--- /dev/null
+++ b/css/layout.css
@@ -0,0 +1,718 @@
+/* ========================================
+ LAYOUT.CSS - Grid, Sections, Mobile-First
+ ======================================== */
+
+/* Header & Navigation */
+.site-header {
+ position: sticky;
+ top: 0;
+ z-index: 50;
+ background: rgba(255, 255, 255, 0.8);
+ backdrop-filter: saturate(1.2) blur(8px);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+ height: var(--header-height);
+}
+
+.nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 100%;
+ max-width: var(--container-max-width);
+ margin: 0 auto;
+ padding: 0 var(--space-4);
+}
+
+.nav__logo img {
+ height: 40px;
+ width: auto;
+ object-fit: contain;
+}
+
+.nav__toggle {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding: var(--space-2);
+ border-radius: var(--radius-sm);
+ transition: var(--transition);
+}
+
+.nav__toggle span {
+ display: block;
+ width: 24px;
+ height: 2px;
+ background: var(--color-text);
+ transition: var(--transition);
+}
+
+.nav__toggle[aria-expanded="true"] span:nth-child(1) {
+ transform: rotate(45deg) translate(6px, 6px);
+}
+
+.nav__toggle[aria-expanded="true"] span:nth-child(2) {
+ opacity: 0;
+}
+
+.nav__toggle[aria-expanded="true"] span:nth-child(3) {
+ transform: rotate(-45deg) translate(6px, -6px);
+}
+
+.nav__menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ border-bottom: 1px solid var(--color-border);
+ box-shadow: var(--shadow);
+ padding: var(--space-3) var(--space-4);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+}
+
+.nav__menu[hidden] {
+ display: none;
+}
+
+.nav__menu a {
+ padding: var(--space-2) 0;
+ color: var(--color-text);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav__menu a:hover {
+ color: var(--color-primary);
+ text-decoration: none;
+}
+
+.nav__actions {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+}
+
+.nav__whatsapp {
+ display: none;
+}
+
+/* Desktop Navigation */
+@media (min-width: 768px) {
+ .nav {
+ padding: 0 var(--space-5);
+ }
+
+ .nav__toggle {
+ display: none;
+ }
+
+ .nav__menu {
+ position: static;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ flex-direction: row;
+ gap: var(--space-4);
+ }
+
+ .nav__menu[hidden] {
+ display: flex;
+ }
+
+ .nav__whatsapp {
+ display: inline-flex;
+ }
+}
+
+/* Hero Section */
+.hero {
+ padding: var(--space-4) 0;
+ background: linear-gradient(135deg, var(--color-surface) 0%, white 100%);
+ min-height: calc(100vh - var(--header-height));
+ margin-top: var(--header-height);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.hero .container {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-4);
+ align-items: center;
+ width: 100%;
+}
+
+.hero__content {
+ text-align: center;
+ max-width: 100%;
+}
+
+.hero__title {
+ font-size: clamp(1.75rem, 5vw, 3.5rem);
+ margin-bottom: var(--space-3);
+ line-height: 1.2;
+}
+
+.hero__rotating {
+ color: var(--color-primary);
+ font-weight: 700;
+ position: relative;
+ display: inline-block;
+ min-width: 200px;
+ text-align: center;
+}
+
+.hero__rotating::after {
+ content: '|';
+ color: var(--color-primary);
+ animation: blink 1.2s infinite;
+ font-weight: 400;
+ margin-left: 2px;
+}
+
+.hero__rotating.typing::after {
+ animation: none;
+ opacity: 1;
+}
+
+@keyframes blink {
+ 0%, 50% { opacity: 1; }
+ 51%, 100% { opacity: 0; }
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+.hero__rotating.fade-in {
+ animation: fadeIn 0.3s ease-in;
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+ .hero__rotating::after {
+ animation: none;
+ opacity: 1;
+ }
+
+ .hero__rotating.fade-in {
+ animation: none;
+ }
+}
+
+.hero__subtitle {
+ font-size: var(--font-size-lg);
+ color: var(--color-muted);
+ max-width: 600px;
+ margin: 0 auto var(--space-4);
+}
+
+.hero__actions {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+ align-items: center;
+}
+
+.hero__image {
+ max-width: 280px;
+ margin: 0 auto;
+ width: 90%;
+}
+
+/* Hero Carousel Styles */
+.hero__carousel {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1;
+ overflow: hidden;
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-lg);
+}
+
+.hero__slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 1s ease-in-out;
+}
+
+.hero__slide.active {
+ opacity: 1;
+}
+
+.hero__slide img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+}
+
+/* Desktop Hero */
+@media (min-width: 768px) {
+ .hero {
+ min-height: 70vh;
+ padding: var(--space-6) 0;
+ }
+
+ .hero .container {
+ grid-template-columns: 1.1fr 0.9fr;
+ gap: var(--space-6);
+ }
+
+ .hero__content {
+ text-align: left;
+ }
+
+ .hero__subtitle {
+ margin: 0 0 var(--space-4) 0;
+ }
+
+ .hero__actions {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ }
+}
+
+/* Section Layouts */
+.section-header {
+ text-align: center;
+ margin-bottom: var(--space-5);
+ max-width: 700px;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 0 var(--space-2);
+}
+
+.section-header h2 {
+ margin-bottom: var(--space-3);
+}
+
+.section-header p {
+ font-size: var(--font-size-lg);
+ color: var(--color-muted);
+ margin-bottom: 0;
+ line-height: var(--line-height-relaxed);
+}
+
+/* Benefits Section */
+.benefits {
+ padding: var(--space-6) 0;
+ background: white;
+}
+
+.benefits__grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-4);
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+ .benefits__grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--space-5);
+ }
+}
+
+@media (min-width: 1024px) {
+ .benefits__grid {
+ grid-template-columns: repeat(3, 1fr);
+ gap: var(--space-4);
+ }
+}
+
+/* Profile Section */
+.profile {
+ padding: var(--space-6) 0;
+ background: var(--color-surface);
+}
+
+.profile__content {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-5);
+ margin-top: var(--space-4);
+}
+
+@media (min-width: 768px) {
+ .profile__content {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+/* Process Section */
+.process {
+ padding: var(--space-6) 0;
+ background: white;
+}
+
+.process__timeline {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-4);
+ margin-top: var(--space-4);
+}
+
+@media (min-width: 768px) {
+ .process__timeline {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1024px) {
+ .process__timeline {
+ grid-template-columns: repeat(5, 1fr);
+ }
+}
+
+/* FAQ Section */
+.faq {
+ padding: var(--space-6) 0;
+ background: var(--color-surface);
+}
+
+.faq__list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-3);
+ margin-top: var(--space-4);
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Testimonials Section */
+.testimonials {
+ padding: var(--space-6) 0;
+ background: white;
+}
+
+/* Testimonials Carousel */
+.testimonials__carousel {
+ position: relative;
+ max-width: 800px;
+ margin: var(--space-4) auto 0;
+}
+
+.testimonials__track {
+ position: relative;
+ overflow: hidden;
+ border-radius: var(--radius-lg);
+}
+
+.testimonial-slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ opacity: 0;
+ transition: opacity 0.8s ease-in-out;
+ transform: translateZ(0); /* Force GPU acceleration */
+}
+
+.testimonial-slide.active {
+ opacity: 1;
+ position: relative;
+}
+
+.testimonial-slide:not(.active) {
+ position: absolute;
+}
+
+/* Testimonials Controls */
+.testimonials__controls {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-4);
+ margin-top: var(--space-4);
+}
+
+.testimonial-nav {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border: 2px solid var(--color-border);
+ background: white;
+ color: var(--color-muted);
+ cursor: pointer;
+ transition: var(--transition);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.testimonial-nav:hover {
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+ background: var(--color-light);
+}
+
+.testimonial-nav:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+/* Testimonials Indicators */
+.testimonials__indicators {
+ display: flex;
+ justify-content: center;
+ gap: var(--space-2);
+}
+
+.testimonial-indicator {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ border: 2px solid var(--color-border);
+ background: transparent;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.testimonial-indicator:hover {
+ border-color: var(--color-primary);
+ background: rgba(197, 54, 148, 0.2);
+}
+
+.testimonial-indicator.active {
+ background: var(--color-primary);
+ border-color: var(--color-primary);
+}
+
+/* Application Section */
+.application {
+ padding: var(--space-6) 0;
+ background: var(--color-surface);
+}
+
+.application-form {
+ max-width: 800px;
+ margin: 0 auto;
+ margin-top: var(--space-4);
+}
+
+.form-section {
+ margin-bottom: var(--space-5);
+}
+
+.form-section h3 {
+ margin-bottom: var(--space-3);
+ padding-bottom: var(--space-2);
+ border-bottom: 2px solid var(--color-primary);
+ color: var(--color-primary);
+}
+
+.form-hint {
+ color: var(--color-muted);
+ font-size: var(--font-size-sm);
+ margin-bottom: var(--space-3);
+ font-style: italic;
+}
+
+/* Footer */
+.site-footer {
+ background: var(--color-text);
+ color: white;
+ padding: var(--space-5) 0 var(--space-4);
+}
+
+.footer__content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-4);
+ margin-bottom: var(--space-4);
+}
+
+@media (min-width: 768px) {
+ .footer__content {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ position: relative;
+ }
+
+ .footer__brand {
+ align-items: flex-start;
+ }
+
+ .footer__links {
+ display: flex !important;
+ flex-direction: column !important;
+ align-items: flex-end !important;
+ gap: var(--space-3) !important;
+ }
+
+ .footer__links-top {
+ display: flex !important;
+ gap: var(--space-4) !important;
+ }
+
+ .footer__links img {
+ display: block !important;
+ margin-top: var(--space-2) !important;
+ }
+}
+
+.footer__brand {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-2);
+}
+
+.footer__logos {
+ display: flex;
+ align-items: flex-end;
+ gap: var(--space-2);
+ margin-bottom: var(--space-1);
+}
+
+.footer__logos a {
+ display: inline-block;
+ line-height: 0;
+}
+
+.footer__logos img:first-child,
+.footer__logos a:first-child img {
+ height: 180px;
+ width: auto;
+ object-fit: contain;
+}
+
+.footer__logos img:last-child {
+ height: 40px;
+ width: auto;
+ object-fit: contain;
+}
+
+.footer__brand p {
+ color: rgba(255, 255, 255, 0.7);
+ margin: 0;
+}
+
+.footer__links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-3);
+}
+
+.footer__links a {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: var(--font-size-sm);
+ transition: var(--transition);
+}
+
+.footer__links a:hover {
+ color: white;
+ text-decoration: none;
+}
+
+.footer__copyright {
+ text-align: center;
+ padding-top: var(--space-4);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer__copyright p {
+ color: rgba(255, 255, 255, 0.6);
+ font-size: var(--font-size-sm);
+ margin: 0;
+}
+
+@media (min-width: 768px) {
+ .footer__content {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
+ }
+}
+
+/* Responsive container adjustments */
+@media (max-width: 768px) {
+ .nav {
+ padding: 0 var(--space-3);
+ }
+
+ .hero {
+ padding: var(--space-5) 0;
+ min-height: 60vh;
+ }
+
+ .benefits,
+ .profile,
+ .process,
+ .faq,
+ .testimonials,
+ .application {
+ padding: var(--space-5) 0;
+ }
+
+ .section-header {
+ margin-bottom: var(--space-4);
+ }
+}
+
+@media (max-width: 480px) {
+ .nav {
+ padding: 0 var(--space-2);
+ }
+
+ .hero {
+ padding: var(--space-3) 0;
+ min-height: calc(100vh - var(--header-height));
+ margin-top: var(--header-height);
+ }
+
+ .hero .container {
+ gap: var(--space-3);
+ }
+
+ .hero__image {
+ max-width: 250px;
+ width: 85%;
+ }
+
+ .hero__title {
+ font-size: clamp(1.5rem, 4.5vw, 2.5rem);
+ margin-bottom: var(--space-2);
+ }
+
+ .hero__subtitle {
+ font-size: var(--font-size-base);
+ margin-bottom: var(--space-3);
+ }
+
+ .hero__actions {
+ gap: var(--space-2);
+ }
+
+ .benefits,
+ .profile,
+ .process,
+ .faq,
+ .testimonials,
+ .application {
+ padding: var(--space-4) 0;
+ }
+
+ .section-header {
+ margin-bottom: var(--space-3);
+ padding: 0 var(--space-1);
+ }
+
+ .benefits__grid {
+ gap: var(--space-3);
+ }
+}
\ No newline at end of file
diff --git a/css/privacy.css b/css/privacy.css
new file mode 100644
index 0000000..c762807
--- /dev/null
+++ b/css/privacy.css
@@ -0,0 +1,380 @@
+/* ========================================
+ PRIVACY.CSS - Elegant & Dynamic Privacy Page
+ ======================================== */
+
+/* Privacy Page Specific Styles */
+.privacy-policy {
+ padding: var(--space-6) 0;
+ background: linear-gradient(135deg, var(--color-bg) 0%, white 50%, var(--color-beige) 100%);
+ position: relative;
+ overflow: hidden;
+}
+
+/* Animated background elements */
+.privacy-policy::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle at 20% 30%, rgba(163, 150, 96, 0.05) 0%, transparent 50%),
+ radial-gradient(circle at 80% 70%, rgba(77, 63, 60, 0.03) 0%, transparent 50%);
+ animation: float 20s ease-in-out infinite;
+ z-index: -1;
+}
+
+@keyframes float {
+ 0%, 100% { transform: translate(0, 0) rotate(0deg); }
+ 25% { transform: translate(-10px, -20px) rotate(1deg); }
+ 50% { transform: translate(20px, -10px) rotate(-1deg); }
+ 75% { transform: translate(-20px, 10px) rotate(0.5deg); }
+}
+
+/* Container with glass effect */
+.privacy-policy__content {
+ max-width: 900px;
+ margin: 0 auto;
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(20px);
+ border-radius: var(--radius-lg);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ position: relative;
+ z-index: 1;
+}
+
+/* Header with elegant styling */
+.privacy-policy__header {
+ text-align: center;
+ padding: var(--space-6) var(--space-5) var(--space-4);
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-emphasis) 100%);
+ color: white;
+ border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+ position: relative;
+ overflow: hidden;
+}
+
+.privacy-policy__header::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
+ animation: shimmer 4s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+ 0%, 100% { transform: translateX(-100%); }
+ 50% { transform: translateX(100%); }
+}
+
+.privacy-policy__title {
+ font-family: var(--font-family-serif);
+ font-size: clamp(2rem, 4vw, 3rem);
+ margin-bottom: var(--space-2);
+ position: relative;
+ z-index: 2;
+ color: white;
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.privacy-policy__subtitle {
+ font-size: var(--font-size-xl);
+ opacity: 0.9;
+ margin: 0;
+ position: relative;
+ z-index: 2;
+ color: white;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Body content with dynamic spacing */
+.privacy-policy__body {
+ padding: var(--space-5);
+}
+
+.privacy-policy__intro {
+ font-size: var(--font-size-lg);
+ line-height: var(--line-height-relaxed);
+ color: var(--color-text);
+ text-align: center;
+ margin-bottom: var(--space-5);
+ padding: var(--space-4);
+ background: linear-gradient(135deg, var(--color-beige) 0%, rgba(255, 255, 255, 0.8) 100%);
+ border-radius: var(--radius);
+ border-left: 4px solid var(--color-primary);
+ position: relative;
+ overflow: hidden;
+}
+
+.privacy-policy__intro::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+ animation: sweep 4s ease-in-out infinite;
+}
+
+@keyframes sweep {
+ 0% { left: -100%; }
+ 50% { left: 100%; }
+ 100% { left: 100%; }
+}
+
+/* Section styling with hover effects */
+.privacy-policy__section {
+ margin-bottom: var(--space-5);
+ padding: var(--space-4);
+ border-radius: var(--radius);
+ transition: all var(--transition);
+ position: relative;
+ background: rgba(255, 255, 255, 0.6);
+ border: 1px solid rgba(163, 150, 96, 0.2);
+}
+
+.privacy-policy__section:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ background: rgba(255, 255, 255, 0.8);
+ border-color: var(--color-primary);
+}
+
+.privacy-policy__section h2 {
+ color: var(--color-primary);
+ font-family: var(--font-family-serif);
+ font-size: var(--font-size-2xl);
+ margin-bottom: var(--space-3);
+ position: relative;
+ display: inline-block;
+}
+
+.privacy-policy__section h2::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 0;
+ height: 3px;
+ background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
+ transition: width 0.3s ease;
+}
+
+.privacy-policy__section:hover h2::after {
+ width: 100%;
+}
+
+/* Dynamic list styling */
+.privacy-policy__list {
+ margin: var(--space-3) 0;
+ padding-left: 0;
+}
+
+.privacy-policy__list li {
+ position: relative;
+ padding: var(--space-2) 0 var(--space-2) var(--space-4);
+ margin-bottom: var(--space-2);
+ border-radius: var(--radius-sm);
+ transition: all var(--transition);
+ opacity: 0;
+ transform: translateX(-20px);
+ animation: slideInFromLeft 0.6s ease forwards;
+}
+
+.privacy-policy__list li:nth-child(1) { animation-delay: 0.1s; }
+.privacy-policy__list li:nth-child(2) { animation-delay: 0.2s; }
+.privacy-policy__list li:nth-child(3) { animation-delay: 0.3s; }
+.privacy-policy__list li:nth-child(4) { animation-delay: 0.4s; }
+.privacy-policy__list li:nth-child(5) { animation-delay: 0.5s; }
+.privacy-policy__list li:nth-child(6) { animation-delay: 0.6s; }
+
+@keyframes slideInFromLeft {
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.privacy-policy__list li::before {
+ content: '✓';
+ position: absolute;
+ left: 0;
+ top: var(--space-2);
+ width: 20px;
+ height: 20px;
+ background: var(--color-primary);
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: bold;
+ transform: scale(0);
+ animation: popIn 0.3s ease forwards;
+ animation-delay: inherit;
+}
+
+@keyframes popIn {
+ 0% { transform: scale(0) rotate(-180deg); }
+ 80% { transform: scale(1.2) rotate(10deg); }
+ 100% { transform: scale(1) rotate(0deg); }
+}
+
+.privacy-policy__list li:hover {
+ background: rgba(163, 150, 96, 0.1);
+ transform: translateX(5px);
+}
+
+/* Elegant link styling */
+.privacy-policy__link {
+ color: var(--color-primary);
+ text-decoration: none;
+ font-weight: 600;
+ position: relative;
+ transition: all var(--transition);
+ display: inline-block;
+}
+
+.privacy-policy__link::before {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
+ transition: width var(--transition);
+}
+
+.privacy-policy__link:hover {
+ color: var(--color-emphasis);
+ transform: translateY(-1px);
+}
+
+.privacy-policy__link:hover::before {
+ width: 100%;
+}
+
+/* Footer section with call-to-action */
+.privacy-policy__footer {
+ margin-top: var(--space-6);
+ padding: var(--space-5);
+ background: linear-gradient(135deg, var(--color-beige) 0%, rgba(255, 255, 255, 0.9) 100%);
+ border-radius: var(--radius);
+ text-align: center;
+ border: 2px solid rgba(163, 150, 96, 0.3);
+ position: relative;
+ overflow: hidden;
+}
+
+.privacy-policy__footer::before {
+ content: '';
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ right: -2px;
+ bottom: -2px;
+ background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-primary));
+ background-size: 300% 300%;
+ animation: gradientMove 3s ease infinite;
+ z-index: -1;
+ border-radius: var(--radius);
+}
+
+@keyframes gradientMove {
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
+}
+
+.privacy-policy__updated {
+ margin-bottom: var(--space-4);
+ color: var(--color-muted);
+ font-style: italic;
+}
+
+.privacy-policy__actions {
+ display: flex;
+ gap: var(--space-3);
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .privacy-policy {
+ padding: var(--space-5) 0;
+ }
+
+ .privacy-policy__content {
+ margin: 0 var(--space-3);
+ }
+
+ .privacy-policy__header {
+ padding: var(--space-4) var(--space-3);
+ }
+
+ .privacy-policy__body {
+ padding: var(--space-3);
+ }
+
+ .privacy-policy__section {
+ padding: var(--space-3);
+ }
+
+ .privacy-policy__actions {
+ flex-direction: column;
+ align-items: center;
+ }
+}
+
+/* Scroll animations */
+@media (prefers-reduced-motion: no-preference) {
+ .privacy-policy__section {
+ opacity: 0;
+ transform: translateY(30px);
+ animation: fadeInUp 0.8s ease forwards;
+ }
+
+ .privacy-policy__section:nth-child(1) { animation-delay: 0.1s; }
+ .privacy-policy__section:nth-child(2) { animation-delay: 0.2s; }
+ .privacy-policy__section:nth-child(3) { animation-delay: 0.3s; }
+ .privacy-policy__section:nth-child(4) { animation-delay: 0.4s; }
+ .privacy-policy__section:nth-child(5) { animation-delay: 0.5s; }
+ .privacy-policy__section:nth-child(6) { animation-delay: 0.6s; }
+ .privacy-policy__section:nth-child(7) { animation-delay: 0.7s; }
+}
+
+@keyframes fadeInUp {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+
+ .privacy-policy__section {
+ opacity: 1;
+ transform: none;
+ }
+
+ .privacy-policy__list li {
+ opacity: 1;
+ transform: none;
+ }
+}
\ No newline at end of file
diff --git a/css/thanks.css b/css/thanks.css
new file mode 100644
index 0000000..4a56b76
--- /dev/null
+++ b/css/thanks.css
@@ -0,0 +1,439 @@
+/* ========================================
+ THANKS.CSS - Thank you page specific styles
+ ======================================== */
+
+/* Thanks Hero Section */
+.thanks-hero {
+ padding: var(--space-6) 0;
+ background: linear-gradient(135deg, var(--color-surface) 0%, white 100%);
+ text-align: center;
+}
+
+.thanks-hero__content {
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.thanks-hero__icon {
+ margin-bottom: var(--space-4);
+}
+
+.thanks-hero__icon svg {
+ margin: 0 auto;
+ display: block;
+}
+
+.thanks-hero__title {
+ color: var(--color-primary);
+ margin-bottom: var(--space-3);
+ font-size: clamp(2rem, 5vw, 3rem);
+}
+
+.thanks-hero__subtitle {
+ font-size: var(--font-size-lg);
+ color: var(--color-muted);
+ margin-bottom: var(--space-4);
+ line-height: var(--line-height-relaxed);
+}
+
+.thanks-hero__folio {
+ background: white;
+ padding: var(--space-3);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ display: inline-block;
+}
+
+.folio-label {
+ font-weight: 600;
+ color: var(--color-text);
+ margin-right: var(--space-2);
+}
+
+.folio-number {
+ background: var(--color-surface-2);
+ padding: 0.5rem 1rem;
+ border-radius: var(--radius-sm);
+ font-family: 'Courier New', monospace;
+ font-weight: bold;
+ color: var(--color-primary);
+}
+
+/* Next Steps Section */
+.next-steps {
+ padding: var(--space-6) 0;
+ background: white;
+}
+
+.next-steps__timeline {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-4);
+ margin-top: var(--space-4);
+}
+
+@media (min-width: 768px) {
+ .next-steps__timeline {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1024px) {
+ .next-steps__timeline {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+.step-card {
+ background: var(--color-surface);
+ padding: var(--space-4);
+ border-radius: var(--radius);
+ text-align: center;
+ border: 2px solid transparent;
+ transition: var(--transition);
+ position: relative;
+}
+
+.step-card:hover {
+ border-color: var(--color-primary);
+ transform: translateY(-2px);
+}
+
+.step-card__number {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: var(--color-primary);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--font-size-xl);
+ font-weight: bold;
+ margin: 0 auto var(--space-3);
+}
+
+.step-card__content h3 {
+ color: var(--color-primary);
+ margin-bottom: var(--space-2);
+ font-size: var(--font-size-lg);
+}
+
+.step-card__content p {
+ margin-bottom: var(--space-2);
+ line-height: var(--line-height-normal);
+}
+
+.step-card__content p:first-of-type {
+ font-weight: 600;
+ color: var(--color-text);
+ font-size: var(--font-size-sm);
+}
+
+.step-card__content p:last-child {
+ color: var(--color-muted);
+ font-size: var(--font-size-sm);
+ margin: 0;
+}
+
+/* Important Info Section */
+.important-info {
+ padding: var(--space-6) 0;
+ background: var(--color-surface);
+}
+
+.info-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-4);
+ margin-top: var(--space-4);
+}
+
+@media (min-width: 768px) {
+ .info-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+.info-card {
+ background: white;
+ padding: var(--space-4);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ display: flex;
+ gap: var(--space-3);
+ border-left: 4px solid var(--color-primary);
+ transition: var(--transition);
+}
+
+.info-card:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg);
+}
+
+.info-card--primary {
+ border-left-color: var(--color-primary);
+}
+
+.info-card--secondary {
+ border-left-color: var(--color-accent);
+}
+
+.info-card--accent {
+ border-left-color: var(--color-success);
+}
+
+.info-card__icon {
+ font-size: 2rem;
+ flex-shrink: 0;
+}
+
+.info-card__content h3 {
+ color: var(--color-text);
+ margin-bottom: var(--space-2);
+ font-size: var(--font-size-lg);
+}
+
+.info-card__content p {
+ color: var(--color-muted);
+ margin: 0;
+ line-height: var(--line-height-relaxed);
+ font-size: var(--font-size-sm);
+}
+
+/* Contact Info Section */
+.contact-info {
+ padding: var(--space-6) 0;
+ background: white;
+}
+
+.contact-options {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-4);
+ margin-top: var(--space-4);
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+@media (min-width: 768px) {
+ .contact-options {
+ grid-template-columns: 1fr;
+ justify-items: center;
+ }
+}
+
+.contact-option {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ padding: var(--space-4);
+ border: 2px solid var(--color-border);
+ border-radius: var(--radius);
+ text-decoration: none;
+ color: var(--color-text);
+ transition: var(--transition);
+ background: white;
+}
+
+.contact-option:hover {
+ border-color: var(--color-primary);
+ background: var(--color-surface);
+ text-decoration: none;
+ transform: translateY(-2px);
+}
+
+.contact-option--primary:hover {
+ border-color: #25D366; /* WhatsApp green */
+ background: color-mix(in oklch, #25D366 10%, white 90%);
+}
+
+.contact-option--secondary:hover {
+ border-color: var(--color-accent);
+ background: color-mix(in oklch, var(--color-accent) 10%, white 90%);
+}
+
+.contact-option__icon {
+ flex-shrink: 0;
+ color: var(--color-primary);
+}
+
+.contact-option--primary .contact-option__icon {
+ color: #25D366;
+}
+
+.contact-option--secondary .contact-option__icon {
+ color: var(--color-accent);
+}
+
+.contact-option__content h4 {
+ margin: 0 0 0.25rem 0;
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+}
+
+.contact-option__content p {
+ margin: 0;
+ color: var(--color-muted);
+ font-size: var(--font-size-sm);
+}
+
+/* Social Proof Section */
+.social-proof {
+ padding: var(--space-6) 0;
+ background: var(--color-surface);
+}
+
+.social-links {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-4);
+ margin-top: var(--space-4);
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+@media (min-width: 768px) {
+ .social-links {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+.social-link {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-3);
+ padding: var(--space-4);
+ background: white;
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ text-decoration: none;
+ color: var(--color-text);
+ transition: var(--transition);
+}
+
+.social-link:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg);
+ text-decoration: none;
+}
+
+.social-link__icon {
+ flex-shrink: 0;
+ color: var(--color-primary);
+}
+
+.social-link__content h4 {
+ margin: 0 0 0.5rem 0;
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ color: var(--color-primary);
+}
+
+.social-link__content p {
+ margin: 0;
+ color: var(--color-muted);
+ font-size: var(--font-size-sm);
+ line-height: var(--line-height-relaxed);
+}
+
+/* Consent Banner */
+.consent-banner {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(45, 45, 45, 0.95);
+ color: white;
+ padding: var(--space-3);
+ z-index: 9999;
+ backdrop-filter: blur(8px);
+}
+
+.consent-banner__content {
+ max-width: var(--container-max-width);
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-3);
+}
+
+.consent-banner__content p {
+ margin: 0;
+ font-size: var(--font-size-sm);
+ flex: 1;
+}
+
+.consent-banner__content a {
+ color: var(--color-primary);
+ text-decoration: underline;
+}
+
+.consent-banner__actions {
+ display: flex;
+ gap: var(--space-2);
+ flex-shrink: 0;
+}
+
+.btn--sm {
+ padding: 0.5rem 1rem;
+ font-size: var(--font-size-sm);
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+ .thanks-hero {
+ padding: var(--space-5) 0;
+ }
+
+ .thanks-hero__folio {
+ display: block;
+ margin: 0 var(--space-2);
+ }
+
+ .next-steps,
+ .important-info,
+ .contact-info,
+ .social-proof {
+ padding: var(--space-5) 0;
+ }
+
+ .step-card,
+ .info-card {
+ padding: var(--space-3);
+ }
+
+ .contact-option,
+ .social-link {
+ padding: var(--space-3);
+ }
+
+ .consent-banner__content {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .consent-banner__content p {
+ margin-bottom: var(--space-2);
+ }
+}
+
+@media (max-width: 480px) {
+ .info-card {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .contact-option {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .social-link {
+ flex-direction: column;
+ text-align: center;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fd998f3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,682 @@
+
+
+
+
+
+ 💖 Únete a Vanity — Aplica en 5 min
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Únete a Vanity y crece con tu Talento
+
+
+ Capacitación real, ingresos por desempeño y un equipo que te impulsa.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📚
+
Capacitación continua
+
Talleres y entrenamientos en tendencias actuales
+
+
+
+
💰
+
Salarios competitivos
+
Ingresos de $10,000 a $20,000 mensuales según habilidad, más comisiones y bonos
+
+
+
+
🕐
+
Flexibilidad de horarios
+
Equilibrio real entre tu vida y tu carrera
+
+
+
+
🏢
+
Ambiente moderno
+
Espacios diseñados para inspirar creatividad
+
+
+
+
📈
+
Crecimiento
+
Ruta clara hacia roles de liderazgo y especialización
+
+
+
+
+
+
+
+
+
+
+
+
+
Requisitos mínimos
+
+ Edad: 18 a 40 años
+ Experiencia mínima: 6 meses en uñas, pestañas, maquillaje, estilismo o cosmetología
+ Vocación de servicio: pasión por brindar una experiencia positiva a las clientas
+ Cualidades personales: madurez, puntualidad y responsabilidad
+ Disponibilidad: de horario y de actuar
+ Apertura a retroalimentación: disposición para aprender y mejorar continuamente
+
+
+
+
+
Extras valorados
+
+ Certificaciones profesionales
+ Inglés conversacional
+ Portafolio reciente (link o fotos de tus trabajos)
+ Manejo básico de redes sociales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
1
+
+
Aplicación online
+
Completa la aplicación en línea (3-6 minutos)
+
+
+
+
+
2
+
+
Revisión de portafolio
+
Revisamos tu portafolio (48–72h hábiles)
+
+
+
+
+
3
+
+
Entrevista
+
Te contactamos para entrevista
+
+
+
+
+
4
+
+
Prueba técnica
+
Realizas una prueba técnica breve
+
+
+
+
+
5
+
+
Oferta
+
Recibes oferta y on-boarding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ¿Cómo funcionan los ingresos y los bonos?
+
+
+ Ofrecemos salarios base competitivos de $10,000 a $20,000 mensuales según tu nivel de habilidad,
+ más un esquema de comisiones transparente y bonos por puntualidad y desempeño .
+
+ Tu esfuerzo y talento tienen una recompensa directa con ingresos que pueden crecer significativamente con tu desarrollo profesional.
+
+
+
+
+
+
+ ¿Qué horarios manejan en Vanity?
+
+
+ Entre semana: Matutino 10:00–18:00 y Vespertino 12:00–20:00 .
+
+ Sábados: 10:00–18:00 .
+
+ Buscamos que los horarios sean claros y favorezcan un buen balance entre vida personal y laboral.
+
+
+
+
+
+
+ ¿Qué apoyo ofrece Vanity para trabajar?
+
+
+ Te brindamos materiales , instalaciones equipadas , impulso en redes ,
+ cartera de clientes y amenidades para clientas para que te enfoques en tu talento.
+
+ De forma natural, se espera que cuentes con tus herramientas profesionales habituales.
+
+
+
+
+
+
+ ¿Qué se evalúa en la prueba técnica?
+
+
+ Observamos tu técnica , manejo de tiempos , higiene ,
+ atención al detalle y la calidad del trato al cliente.
+
+ Queremos ver cómo brilla tu talento en un entorno real.
+
+
+
+
+
+
+ ¿Qué diferencia hay entre trabajar en casa y en Vanity?
+
+
+ En Vanity te olvidas de costos como insumos o búsqueda de clientela ; ya cuentas con
+ materiales , espacios y una cartera de clientas que valora el servicio.
+ Además, nuestro equipo te respalda para que te concentres en lo que mejor haces .
+
+ Resultado: ganancias comparables o mejores, con menos preocupaciones operativas .
+
+
+
+
+
+
+ ¿Manejan turnos parciales o guardias en fines de semana?
+
+
+ Sí. Ofrecemos turnos parciales enfocados en servicios ágiles como
+ pedicure , gelish o uñas acrílicas , especialmente en fines de semana.
+ Funciona bajo un esquema flexible sujeto a disponibilidad y demanda , similar a "on-call" en
+ temporada alta .
+
+
+
+
+
+
+ ¿Qué tipo de contrato manejan?
+
+
+ El contrato es por tiempo indefinido . Al comprometernos con tu capacitación y crecimiento profesional,
+ te pedimos retener tu colaboración en Vanity por 2 años .
+
+ Esto nos permite invertir en tu desarrollo con la tranquilidad de construir un equipo sólido y duradero.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blanquita
+ Vanity Plaza O
+
+
+
+
"En Vanity me siento siempre como en casa, mi trabajo para mí es una pasión y compartir con mis compañeras, no solo el trabajo, sino parte de la vida, es un placer. No se diga trabajar con Ale y aprender de ella, siempre inspira. La marca me encanta y ver cómo ha evolucionado y sobre todo ahora ser parte de esa evolución me emociona mucho."
+
+
+
+
+
+
+
+
+
+ Sabina
+ Vanity Plaza O
+
+
+
+
"Mi experiencia en Vanity ha sido genial desde el primer día. Aprendo algo nuevo cada día y estoy orgullosa de mi progreso en técnicas y servicios. Vanity seguirá siendo el mejor!!"
+
+
+
+
+
+
+
+
+
+ Majo
+ Vanity Plaza CIMA
+
+
+
+
"Me encanta, es mi espacio seguro. Siempre aprendo cosas nuevas para mejorar laboral y personalmente."
+
+
+
+
+
+
+
+
+
+ Anni
+ Vanity Plaza CIMA
+
+
+
+
"Al llegar a Vanity me sentía estancada, pero aquí descubrí que puedo lograr lo que me proponga. He aprendido, crecido y sanado cosas que no sabía que necesitaba. Hoy me siento feliz y acompañada."
+
+
+
+
+
+
+
+
+
+ Adriana
+ Vanity Plaza CIMA
+
+
+
+
"Trabajar en Vanity es increíble, aprendo algo nuevo cada día. La convivencia con el equipo es muy especial y siempre hay apoyo."
+
+
+
+
+
+
+
+
+
+ América
+ Vanity Plaza CIMA
+
+
+
+
"Vanity es un lugar seguro donde crecí profesional y personalmente. Amo la vibra y el ambiente, siempre hay algo que me motiva y me hace sentir mejor."
+
+
+
+
+
+
+
+
+
+ Karen
+ Vanity Los Pinos
+
+
+
+
"Me siento escuchada y valorada, cumpliendo con el trabajo de mis sueños. Vanity es profesional y una gran escuela. Nuestros jefes tienen la paciencia y experiencia para apoyarnos."
+
+
+
+
+
+
+
+
+
+ Paola
+ Vanity Los Pinos
+
+
+
+
"Me siento agradecida y bendecida de tener a Vanity como mi segunda casa. Empezamos con pocas clientas y ahora es un espacio lleno de buena vibra. Es una experiencia única que solo aquí se vive."
+
+
+
+
+
+
+
+
"Casi tres años en Vanity y he crecido muchísimo. Aprendí cosas nuevas, perfeccioné otras, y día a día veo cómo mi trabajo mejora. Vanity ha evolucionado mucho y ser parte de esto me llena de orgullo y alegría."
+
+
+
+
+ Itza
+ Vanity Los Pinos
+
+
+
+
+
+
+
+
+
"Vanity Nail Salon es un espacio que impulsa a crecer y seguir soñando. Cada día es un aprendizaje y un lugar que inspira como clienta y trabajadora."
+
+
+
+
+ Vale
+ Vanity Plaza O
+
+
+
+
+
+
+
+
+
"Mi experiencia ha sido muy buena. Me gusta el equipo, nos apoyamos y estamos en constante capacitación para no quedarnos atrás en tendencias y técnicas."
+
+
+
+
+ Eunice
+ Vanity Plaza O
+
+
+
+
+
+
+
+
+
"Aunque llevo poco tiempo, me siento motivada y apoyada. He conocido amigas y una red de apoyo que me impulsa a ser responsable y crecer. Vanity ha cambiado mi vida de forma muy positiva."
+
+
+
+
+ Tay
+ Vanity Plaza O
+
+
+
+
+
+
+
+
+
+
+ Frida
+ Marketing Team
+
+
+
+
"Llegué sin saber nada de uñas y gracias al apoyo de Ale y mis compañeras aprendí paso a paso. Hoy soy directora de marketing y disfruto de mi trabajo con paz, entusiasmo y gratitud. Vanity es un lugar donde cada éxito de la marca se siente personal y especial."
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Aplica en 2 minutos y empieza tu camino con Vanity
+
+ Completa nuestra aplicación en línea y descubre las oportunidades
+ que tenemos para ti en Vanity. Tu talento merece el mejor lugar para crecer.
+
+
+
+ 15+
+ Socias felices
+
+
+ 3
+ Sucursales
+
+
+ 8+
+ Años de experiencia
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/analytics.js b/js/analytics.js
new file mode 100644
index 0000000..11eb337
--- /dev/null
+++ b/js/analytics.js
@@ -0,0 +1,355 @@
+/**
+ * ANALYTICS.JS - Google Analytics 4 and social pixels
+ * Loads asynchronously with consent management
+ */
+
+// Configuration
+const ANALYTICS_CONFIG = {
+ GA4_ID: 'G-XXXXXXXXXX', // Replace with actual GA4 ID
+ META_PIXEL_ID: '123456789', // Replace with actual Meta Pixel ID
+ TIKTOK_PIXEL_ID: 'TIKTOK123', // Replace with actual TikTok Pixel ID
+};
+
+// Consent management (basic implementation)
+let analyticsConsent = localStorage.getItem('analytics_consent') !== 'false';
+
+// Initialize Google Analytics 4
+function initGA4() {
+ if (!analyticsConsent || !ANALYTICS_CONFIG.GA4_ID) return;
+
+ // Load gtag script
+ const script = document.createElement('script');
+ script.async = true;
+ script.src = `https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_CONFIG.GA4_ID}`;
+ document.head.appendChild(script);
+
+ // Initialize dataLayer and gtag
+ window.dataLayer = window.dataLayer || [];
+ function gtag() {
+ dataLayer.push(arguments);
+ }
+
+ window.gtag = gtag;
+
+ gtag('js', new Date());
+ gtag('config', ANALYTICS_CONFIG.GA4_ID, {
+ send_page_view: true,
+ allow_google_signals: true,
+ allow_ad_personalization_signals: true
+ });
+
+ // Track initial page view
+ gtag('event', 'page_view', {
+ page_title: document.title,
+ page_location: window.location.href,
+ page_path: window.location.pathname
+ });
+
+ console.log('GA4 initialized');
+}
+
+// Initialize Meta Pixel
+function initMetaPixel() {
+ if (!analyticsConsent || !ANALYTICS_CONFIG.META_PIXEL_ID) return;
+
+ // Meta Pixel base code
+ !function(f,b,e,v,n,t,s)
+ {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+ n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+ if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+ n.queue=[];t=b.createElement(e);t.async=!0;
+ t.src=v;s=b.getElementsByTagName(e)[0];
+ s.parentNode.insertBefore(t,s)}(window, document,'script',
+ 'https://connect.facebook.net/en_US/fbevents.js');
+
+ fbq('init', ANALYTICS_CONFIG.META_PIXEL_ID);
+ fbq('track', 'PageView');
+
+ console.log('Meta Pixel initialized');
+}
+
+// Initialize TikTok Pixel
+function initTikTokPixel() {
+ if (!analyticsConsent || !ANALYTICS_CONFIG.TIKTOK_PIXEL_ID) return;
+
+ // TikTok Pixel base code
+ !function (w, d, t) {
+ w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i {
+ if (!formStarted) {
+ formStarted = true;
+ gtag('event', 'form_start', {
+ event_category: 'form',
+ event_label: 'application_form',
+ value: 1
+ });
+ }
+ }, { once: true });
+ }
+
+ // Track video interactions (if any)
+ const videos = document.querySelectorAll('video');
+ videos.forEach(video => {
+ video.addEventListener('play', () => {
+ gtag('event', 'video_play', {
+ event_category: 'engagement',
+ event_label: video.src || 'embedded_video',
+ value: 1
+ });
+ });
+
+ video.addEventListener('ended', () => {
+ gtag('event', 'video_complete', {
+ event_category: 'engagement',
+ event_label: video.src || 'embedded_video',
+ value: 1
+ });
+ });
+ });
+
+ // Track file downloads
+ document.addEventListener('click', (e) => {
+ const link = e.target.closest('a');
+ if (!link) return;
+
+ const href = link.getAttribute('href');
+ if (href && (href.includes('.pdf') || href.includes('.doc') || href.includes('.zip'))) {
+ gtag('event', 'file_download', {
+ event_category: 'engagement',
+ event_label: href,
+ value: 1
+ });
+ }
+ });
+
+ // Track external link clicks
+ document.addEventListener('click', (e) => {
+ const link = e.target.closest('a');
+ if (!link) return;
+
+ const href = link.getAttribute('href');
+ if (href && (href.startsWith('http') && !href.includes(window.location.hostname))) {
+ gtag('event', 'external_link_click', {
+ event_category: 'engagement',
+ event_label: href,
+ value: 1
+ });
+ }
+ });
+}
+
+// Track ecommerce events (if applicable)
+function trackConversionEvents() {
+ // Track form submission as conversion
+ const form = document.getElementById('formJoin');
+ if (form && typeof gtag !== 'undefined') {
+ form.addEventListener('submit', () => {
+ // This will be called before the form is actually submitted
+ setTimeout(() => {
+ gtag('event', 'conversion', {
+ send_to: `${ANALYTICS_CONFIG.GA4_ID}/lead_generation`,
+ event_category: 'lead',
+ event_label: 'application_submitted',
+ value: 1
+ });
+
+ // Meta Pixel conversion
+ if (typeof fbq !== 'undefined') {
+ fbq('track', 'Lead', {
+ content_name: 'Job Application',
+ content_category: 'Recruitment',
+ value: 1,
+ currency: 'MXN'
+ });
+ }
+
+ // TikTok Pixel conversion
+ if (typeof ttq !== 'undefined') {
+ ttq.track('SubmitForm', {
+ content_type: 'application',
+ content_name: 'Job Application'
+ });
+ }
+ }, 100);
+ });
+ }
+}
+
+// Enhanced user engagement tracking
+function trackEngagement() {
+ let engagementStartTime = Date.now();
+ let maxScrollDepth = 0;
+ let interactions = 0;
+
+ // Track interactions
+ ['click', 'scroll', 'keydown'].forEach(eventType => {
+ document.addEventListener(eventType, () => {
+ interactions++;
+ }, { passive: true });
+ });
+
+ // Track scroll depth more granularly
+ function updateScrollDepth() {
+ const scrollTop = window.pageYOffset;
+ const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+ const scrollPercent = Math.min(100, Math.round((scrollTop / docHeight) * 100));
+
+ if (scrollPercent > maxScrollDepth) {
+ maxScrollDepth = scrollPercent;
+ }
+ }
+
+ window.addEventListener('scroll', updateScrollDepth, { passive: true });
+
+ // Send engagement data before page unload
+ function sendEngagementData() {
+ if (typeof gtag === 'undefined') return;
+
+ const timeOnPage = Math.round((Date.now() - engagementStartTime) / 1000);
+
+ gtag('event', 'engagement_summary', {
+ event_category: 'engagement',
+ custom_parameters: {
+ time_on_page: timeOnPage,
+ max_scroll_depth: maxScrollDepth,
+ interactions_count: interactions
+ }
+ });
+ }
+
+ // Send data on page visibility change or unload
+ document.addEventListener('visibilitychange', () => {
+ if (document.visibilityState === 'hidden') {
+ sendEngagementData();
+ }
+ });
+
+ window.addEventListener('beforeunload', sendEngagementData);
+}
+
+// Consent banner (basic implementation)
+function showConsentBanner() {
+ if (localStorage.getItem('analytics_consent') !== null) return;
+
+ const banner = document.createElement('div');
+ banner.className = 'consent-banner';
+ banner.innerHTML = `
+
+
Utilizamos cookies y herramientas de análisis para mejorar tu experiencia.
+ Más información
+
+ Rechazar
+ Aceptar
+
+
+ `;
+
+ // Add basic styles
+ banner.style.cssText = `
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(45, 45, 45, 0.95);
+ color: white;
+ padding: 1rem;
+ z-index: 9999;
+ backdrop-filter: blur(8px);
+ `;
+
+ document.body.appendChild(banner);
+
+ // Set up event listeners
+ const acceptBtn = banner.querySelector('.consent-accept');
+ const rejectBtn = banner.querySelector('.consent-reject');
+
+ acceptBtn.addEventListener('click', () => setConsent(true));
+ rejectBtn.addEventListener('click', () => setConsent(false));
+
+ // Consent function
+ function setConsent(accepted) {
+ localStorage.setItem('analytics_consent', accepted.toString());
+ analyticsConsent = accepted;
+ banner.remove();
+
+ if (accepted) {
+ initializeAnalytics();
+ }
+ }
+}
+
+// Main initialization function
+function initializeAnalytics() {
+ if (!analyticsConsent) return;
+
+ // Only initialize with valid IDs (not placeholder values)
+ if (ANALYTICS_CONFIG.GA4_ID && !ANALYTICS_CONFIG.GA4_ID.includes('XXXXXXXXXX')) {
+ initGA4();
+ }
+
+ if (ANALYTICS_CONFIG.META_PIXEL_ID && !ANALYTICS_CONFIG.META_PIXEL_ID.includes('123456789')) {
+ initMetaPixel();
+ }
+
+ if (ANALYTICS_CONFIG.TIKTOK_PIXEL_ID && !ANALYTICS_CONFIG.TIKTOK_PIXEL_ID.includes('TIKTOK123')) {
+ initTikTokPixel();
+ }
+
+ // Wait for DOM to be ready for event tracking
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ trackCustomEvents();
+ trackConversionEvents();
+ trackEngagement();
+ });
+ } else {
+ trackCustomEvents();
+ trackConversionEvents();
+ trackEngagement();
+ }
+}
+
+// Enhanced error tracking
+window.addEventListener('error', (e) => {
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'exception', {
+ description: e.error?.message || 'Unknown error',
+ fatal: false
+ });
+ }
+});
+
+// Initialize everything
+function init() {
+ // Show consent banner if needed
+ showConsentBanner();
+
+ // Initialize analytics if consent already given
+ if (analyticsConsent) {
+ initializeAnalytics();
+ }
+}
+
+// Start initialization
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+} else {
+ init();
+}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..183dc8d
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,789 @@
+/**
+ * MAIN.JS - Core interactions and form handling
+ * Mobile-first, progressive enhancement approach
+ */
+
+// Utility functions
+const $ = (selector, context = document) => context.querySelector(selector);
+const $$ = (selector, context = document) => [...context.querySelectorAll(selector)];
+
+// Remove no-js class
+document.documentElement.classList.remove('no-js');
+
+// ==============================================
+// MOBILE NAVIGATION
+// ==============================================
+
+function initMobileNav() {
+ const toggle = $('.nav__toggle');
+ const menu = $('#navMenu');
+
+ if (!toggle || !menu) return;
+
+ toggle.addEventListener('click', () => {
+ const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
+
+ toggle.setAttribute('aria-expanded', String(!isExpanded));
+ menu.hidden = isExpanded;
+
+ // Trap focus when menu is open
+ if (!isExpanded) {
+ menu.querySelector('a')?.focus();
+ }
+ });
+
+ // Close menu when clicking outside
+ document.addEventListener('click', (e) => {
+ if (!toggle.contains(e.target) && !menu.contains(e.target)) {
+ toggle.setAttribute('aria-expanded', 'false');
+ menu.hidden = true;
+ }
+ });
+
+ // Close menu on escape key
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
+ toggle.setAttribute('aria-expanded', 'false');
+ menu.hidden = true;
+ toggle.focus();
+ }
+ });
+}
+
+// ==============================================
+// ANIMATED HEADLINE
+// ==============================================
+
+function initAnimatedHeadline() {
+ const rotatingElement = $('#rotating');
+ if (!rotatingElement) return;
+
+ const words = ["Talento", "Pasión", "Servicio", "Actitud"];
+ let currentIndex = 0;
+ let currentText = '';
+ let isDeleting = false;
+ let typeSpeed = 120; // Speed of typing
+ let deleteSpeed = 60; // Speed of deleting
+ let pauseTime = 1500; // Pause between words
+
+ // Respect reduced motion preference
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+ if (prefersReducedMotion) {
+ rotatingElement.textContent = words[0];
+ return;
+ }
+
+ function typeAnimation() {
+ const currentWord = words[currentIndex];
+
+ if (isDeleting) {
+ // Remove characters
+ currentText = currentWord.substring(0, currentText.length - 1);
+ rotatingElement.classList.add('typing');
+ } else {
+ // Add characters
+ currentText = currentWord.substring(0, currentText.length + 1);
+ rotatingElement.classList.add('typing');
+ }
+
+ rotatingElement.textContent = currentText;
+
+ // Determine next action
+ if (!isDeleting && currentText === currentWord) {
+ // Word is complete, pause then start deleting
+ rotatingElement.classList.remove('typing');
+ setTimeout(() => {
+ isDeleting = true;
+ typeAnimation();
+ }, pauseTime);
+ return;
+ }
+
+ if (isDeleting && currentText === '') {
+ // Finished deleting, move to next word
+ isDeleting = false;
+ currentIndex = (currentIndex + 1) % words.length;
+ rotatingElement.classList.remove('typing');
+ setTimeout(typeAnimation, 300); // Brief pause before starting new word
+ return;
+ }
+
+ // Continue typing/deleting
+ const speed = isDeleting ? deleteSpeed : typeSpeed;
+
+ // Add some randomness to typing speed for more natural feel
+ const randomSpeed = speed + (Math.random() * 40 - 20);
+
+ setTimeout(typeAnimation, randomSpeed);
+ }
+
+ // Start animation after initial delay
+ setTimeout(typeAnimation, 800);
+}
+
+// ==============================================
+// SMOOTH SCROLLING
+// ==============================================
+
+function initSmoothScrolling() {
+ // Handle anchor links
+ $$('a[href^="#"]').forEach(link => {
+ link.addEventListener('click', (e) => {
+ const href = link.getAttribute('href');
+ if (href === '#') return;
+
+ const target = $(href);
+ if (!target) return;
+
+ e.preventDefault();
+
+ const headerHeight = $('.site-header')?.offsetHeight || 80;
+ const targetPosition = target.offsetTop - headerHeight;
+
+ window.scrollTo({
+ top: targetPosition,
+ behavior: 'smooth'
+ });
+
+ // Close mobile menu if open
+ const toggle = $('.nav__toggle');
+ const menu = $('#navMenu');
+ if (toggle && menu && toggle.getAttribute('aria-expanded') === 'true') {
+ toggle.setAttribute('aria-expanded', 'false');
+ menu.hidden = true;
+ }
+ });
+ });
+}
+
+// ==============================================
+// IMAGE CAROUSEL
+// ==============================================
+
+function initImageCarousel() {
+ const carousel = $('#imageCarousel');
+ if (!carousel) return;
+
+ const track = carousel.querySelector('.carousel-track');
+ const slides = carousel.querySelectorAll('.carousel-slide');
+ const prevBtn = $('#carouselPrev');
+ const nextBtn = $('#carouselNext');
+ const indicators = carousel.querySelectorAll('.carousel-indicator');
+
+ let currentSlide = 0;
+ let autoPlayInterval;
+ const autoPlayDelay = 4000; // 4 seconds
+
+ // Respect reduced motion preference
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+ function updateCarousel(slideIndex, manual = false) {
+ // Remove active class from all slides and indicators
+ slides.forEach(slide => slide.classList.remove('active'));
+ indicators.forEach(indicator => indicator.classList.remove('active'));
+
+ // Add active class to current slide and indicator
+ slides[slideIndex].classList.add('active');
+ indicators[slideIndex].classList.add('active');
+
+ currentSlide = slideIndex;
+
+ // Restart autoplay if this was a manual change
+ if (manual && !prefersReducedMotion) {
+ clearInterval(autoPlayInterval);
+ startAutoPlay();
+ }
+
+ // Track carousel interaction
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'carousel_slide', {
+ event_category: 'engagement',
+ event_label: `slide_${slideIndex}`,
+ value: slideIndex
+ });
+ }
+ }
+
+ function nextSlide() {
+ const nextIndex = (currentSlide + 1) % slides.length;
+ updateCarousel(nextIndex);
+ }
+
+ function prevSlide() {
+ const prevIndex = (currentSlide - 1 + slides.length) % slides.length;
+ updateCarousel(prevIndex);
+ }
+
+ function goToSlide(slideIndex) {
+ updateCarousel(slideIndex, true);
+ }
+
+ function startAutoPlay() {
+ if (prefersReducedMotion) return;
+
+ autoPlayInterval = setInterval(() => {
+ nextSlide();
+ }, autoPlayDelay);
+ }
+
+ function stopAutoPlay() {
+ clearInterval(autoPlayInterval);
+ }
+
+ // Event listeners
+ if (prevBtn) {
+ prevBtn.addEventListener('click', () => {
+ prevSlide();
+ });
+ }
+
+ if (nextBtn) {
+ nextBtn.addEventListener('click', () => {
+ nextSlide();
+ });
+ }
+
+ // Indicator clicks
+ indicators.forEach((indicator, index) => {
+ indicator.addEventListener('click', () => {
+ goToSlide(index);
+ });
+ });
+
+ // Keyboard navigation
+ carousel.addEventListener('keydown', (e) => {
+ if (e.key === 'ArrowLeft') {
+ e.preventDefault();
+ prevSlide();
+ } else if (e.key === 'ArrowRight') {
+ e.preventDefault();
+ nextSlide();
+ }
+ });
+
+ // Touch/swipe support
+ let touchStartX = 0;
+ let touchEndX = 0;
+
+ track.addEventListener('touchstart', (e) => {
+ touchStartX = e.changedTouches[0].screenX;
+ }, { passive: true });
+
+ track.addEventListener('touchend', (e) => {
+ touchEndX = e.changedTouches[0].screenX;
+ handleSwipe();
+ }, { passive: true });
+
+ function handleSwipe() {
+ const swipeThreshold = 50;
+ const swipeLength = touchEndX - touchStartX;
+
+ if (Math.abs(swipeLength) > swipeThreshold) {
+ if (swipeLength > 0) {
+ prevSlide();
+ } else {
+ nextSlide();
+ }
+ }
+ }
+
+ // Pause autoplay on hover
+ carousel.addEventListener('mouseenter', stopAutoPlay);
+ carousel.addEventListener('mouseleave', () => {
+ if (!prefersReducedMotion) startAutoPlay();
+ });
+
+ // Pause autoplay when page is not visible
+ document.addEventListener('visibilitychange', () => {
+ if (document.hidden) {
+ stopAutoPlay();
+ } else if (!prefersReducedMotion) {
+ startAutoPlay();
+ }
+ });
+
+ // Start autoplay
+ if (!prefersReducedMotion) {
+ startAutoPlay();
+ }
+
+ // Intersection Observer for performance
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ if (!prefersReducedMotion) startAutoPlay();
+ } else {
+ stopAutoPlay();
+ }
+ });
+ }, { threshold: 0.5 });
+
+ observer.observe(carousel);
+}
+
+// ==============================================
+// HERO CAROUSEL - Auto-rotating image slideshow
+// ==============================================
+
+function initHeroCarousel() {
+ const carousel = $('#heroCarousel');
+ if (!carousel) return;
+
+ const slides = carousel.querySelectorAll('.hero__slide');
+ let currentSlide = 0;
+ let autoPlayInterval;
+ const autoPlayDelay = 3000; // 3 seconds
+
+ // Check for reduced motion preference
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+ function showSlide(index) {
+ // Remove active class from all slides
+ slides.forEach(slide => slide.classList.remove('active'));
+
+ // Add active class to current slide
+ slides[index].classList.add('active');
+
+ // Track slide view
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'hero_slide_view', {
+ event_category: 'engagement',
+ event_label: `hero_slide_${index + 1}`,
+ value: index + 1
+ });
+ }
+ }
+
+ function nextSlide() {
+ currentSlide = (currentSlide + 1) % slides.length;
+ showSlide(currentSlide);
+ }
+
+ function startAutoPlay() {
+ if (prefersReducedMotion) return;
+
+ autoPlayInterval = setInterval(nextSlide, autoPlayDelay);
+ }
+
+ function stopAutoPlay() {
+ if (autoPlayInterval) {
+ clearInterval(autoPlayInterval);
+ autoPlayInterval = null;
+ }
+ }
+
+ // Initialize first slide
+ showSlide(currentSlide);
+
+ // Start autoplay
+ startAutoPlay();
+
+ // Pause autoplay on hover
+ carousel.addEventListener('mouseenter', stopAutoPlay);
+ carousel.addEventListener('mouseleave', startAutoPlay);
+
+ // Pause autoplay when page is not visible
+ document.addEventListener('visibilitychange', () => {
+ if (document.hidden) {
+ stopAutoPlay();
+ } else {
+ startAutoPlay();
+ }
+ });
+
+ // Pause autoplay on focus within carousel
+ carousel.addEventListener('focusin', stopAutoPlay);
+ carousel.addEventListener('focusout', startAutoPlay);
+
+ // Cleanup on page unload
+ window.addEventListener('beforeunload', stopAutoPlay);
+}
+
+// ==============================================
+// TESTIMONIALS CAROUSEL - Auto-rotating testimonials
+// ==============================================
+
+function initTestimonialsCarousel() {
+ const carousel = $('#testimonialsCarousel');
+ if (!carousel) return;
+
+ const slides = carousel.querySelectorAll('.testimonial-slide');
+ const indicators = carousel.querySelectorAll('.testimonial-indicator');
+ let currentSlide = 0;
+ let autoPlayInterval;
+ const autoPlayDelay = 15000; // 15 seconds for testimonials
+
+ // Check for reduced motion preference
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+ function showSlide(index) {
+ // Remove active class from all slides and indicators
+ slides.forEach(slide => slide.classList.remove('active'));
+ indicators.forEach(indicator => indicator.classList.remove('active'));
+
+ // Add active class to current slide and indicator
+ slides[index].classList.add('active');
+ indicators[index].classList.add('active');
+
+ // Track testimonial view
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'testimonial_view', {
+ event_category: 'engagement',
+ event_label: `testimonial_${index + 1}`,
+ value: index + 1
+ });
+ }
+ }
+
+ function nextSlide() {
+ currentSlide = (currentSlide + 1) % slides.length;
+ showSlide(currentSlide);
+ }
+
+ function prevSlide() {
+ currentSlide = (currentSlide - 1 + slides.length) % slides.length;
+ showSlide(currentSlide);
+ }
+
+ function goToSlide(index) {
+ currentSlide = index;
+ showSlide(currentSlide);
+ restartAutoPlay();
+ }
+
+ function startAutoPlay() {
+ if (prefersReducedMotion) return;
+ autoPlayInterval = setInterval(nextSlide, autoPlayDelay);
+ }
+
+ function stopAutoPlay() {
+ if (autoPlayInterval) {
+ clearInterval(autoPlayInterval);
+ autoPlayInterval = null;
+ }
+ }
+
+ function restartAutoPlay() {
+ stopAutoPlay();
+ startAutoPlay();
+ }
+
+ // Initialize first slide
+ showSlide(currentSlide);
+
+ // Add click handlers to indicators
+ indicators.forEach((indicator, index) => {
+ indicator.addEventListener('click', () => goToSlide(index));
+ });
+
+ // Add click handlers to navigation buttons
+ const prevBtn = $('#testimonioPrev');
+ const nextBtn = $('#testimonioNext');
+
+ if (prevBtn) {
+ prevBtn.addEventListener('click', () => {
+ prevSlide();
+ restartAutoPlay();
+ });
+ }
+
+ if (nextBtn) {
+ nextBtn.addEventListener('click', () => {
+ nextSlide();
+ restartAutoPlay();
+ });
+ }
+
+ // Start autoplay
+ startAutoPlay();
+
+ // Pause autoplay on hover
+ carousel.addEventListener('mouseenter', stopAutoPlay);
+ carousel.addEventListener('mouseleave', startAutoPlay);
+
+ // Pause autoplay when page is not visible
+ document.addEventListener('visibilitychange', () => {
+ if (document.hidden) {
+ stopAutoPlay();
+ } else {
+ startAutoPlay();
+ }
+ });
+
+ // Pause autoplay on focus within carousel
+ carousel.addEventListener('focusin', stopAutoPlay);
+ carousel.addEventListener('focusout', startAutoPlay);
+
+ // Cleanup on page unload
+ window.addEventListener('beforeunload', stopAutoPlay);
+}
+
+// ==============================================
+// APPLICATION FORM HANDLING
+// ==============================================
+
+function initApplicationForm() {
+ const ctaButtons = $$('#openApplicationForm, .btn[href="#aplicar"]');
+
+ ctaButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+
+ // Track CTA click
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'application_form_open', {
+ event_category: 'engagement',
+ event_label: 'cta_button',
+ value: 1
+ });
+ }
+
+ // Redirect to application form
+ const formUrl = 'https://feedback.soul23.cloud/s/cmfsu7y5h003smo0170y0l0x5';
+ window.open(formUrl, '_blank', 'noopener,noreferrer');
+ });
+ });
+}
+
+// ==============================================
+// FAQ ACCORDIONS - Elegant Accordion Behavior
+// ==============================================
+
+function initFAQAccordions() {
+ const faqItems = $$('.faq__item');
+
+ faqItems.forEach(item => {
+ const question = item.querySelector('.faq__question');
+
+ question?.addEventListener('click', (e) => {
+ e.preventDefault(); // Prevent default details behavior
+
+ const isCurrentlyOpen = item.open;
+
+ // Close all other FAQ items first
+ faqItems.forEach(otherItem => {
+ if (otherItem !== item && otherItem.open) {
+ otherItem.open = false;
+ }
+ });
+
+ // If the clicked item was closed, open it
+ if (!isCurrentlyOpen) {
+ item.open = true;
+
+ // Track FAQ interactions
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'faq_open', {
+ event_category: 'engagement',
+ event_label: question.textContent.trim(),
+ value: 1
+ });
+ }
+ }
+ });
+ });
+
+ // Enhanced keyboard navigation
+ faqItems.forEach((item, index) => {
+ const question = item.querySelector('.faq__question');
+
+ question?.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ question.click();
+ } else if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ const nextIndex = (index + 1) % faqItems.length;
+ faqItems[nextIndex].querySelector('.faq__question')?.focus();
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ const prevIndex = (index - 1 + faqItems.length) % faqItems.length;
+ faqItems[prevIndex].querySelector('.faq__question')?.focus();
+ }
+ });
+ });
+}
+
+// ==============================================
+// ANALYTICS TRACKING
+// ==============================================
+
+function initAnalyticsTracking() {
+ // Track CTA clicks
+ $$('a[href="#aplicar"], .btn[href="#aplicar"]').forEach(button => {
+ button.addEventListener('click', () => {
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'apply_click', {
+ event_category: 'engagement',
+ event_label: button.textContent.trim(),
+ value: 1
+ });
+ }
+ });
+ });
+
+ // Track WhatsApp clicks
+ $$('a[href*="wa.me"], a[href*="whatsapp"]').forEach(link => {
+ link.addEventListener('click', () => {
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'whatsapp_click', {
+ event_category: 'engagement',
+ event_label: 'whatsapp_contact',
+ value: 1
+ });
+ }
+ });
+ });
+
+ // Track scroll depth
+ let maxScroll = 0;
+ const milestones = [25, 50, 75, 100];
+ const trackedMilestones = new Set();
+
+ function trackScrollDepth() {
+ const scrollTop = window.pageYOffset;
+ const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+ const scrollPercent = Math.round((scrollTop / docHeight) * 100);
+
+ if (scrollPercent > maxScroll) {
+ maxScroll = scrollPercent;
+
+ milestones.forEach(milestone => {
+ if (scrollPercent >= milestone && !trackedMilestones.has(milestone)) {
+ trackedMilestones.add(milestone);
+
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'scroll_depth', {
+ event_category: 'engagement',
+ event_label: `${milestone}%`,
+ value: milestone
+ });
+ }
+ }
+ });
+ }
+ }
+
+ // Throttled scroll tracking
+ let scrollTimer;
+ window.addEventListener('scroll', () => {
+ if (scrollTimer) clearTimeout(scrollTimer);
+ scrollTimer = setTimeout(trackScrollDepth, 100);
+ });
+}
+
+// ==============================================
+// SCROLL ANIMATIONS
+// ==============================================
+
+function initScrollAnimations() {
+ // Check for reduced motion preference
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+ if (prefersReducedMotion) return;
+
+ // Create intersection observer for scroll animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const element = entry.target;
+
+ // Add the animate-in class to trigger animations
+ element.classList.add('animate-in');
+
+ // For sections with multiple children, stagger their animations
+ const children = element.querySelectorAll('.benefit-card, .process__step, .faq__item, .stat-item');
+ children.forEach((child, index) => {
+ setTimeout(() => {
+ child.classList.add('animate-in');
+ }, index * 100); // 100ms delay between each child
+ });
+
+ // Special handling for CTA section
+ if (element.classList.contains('cta-carousel')) {
+ setTimeout(() => {
+ const text = element.querySelector('.cta-carousel__text');
+ const images = element.querySelector('.cta-carousel__images');
+
+ if (text) text.classList.add('animate-in');
+ setTimeout(() => {
+ if (images) images.classList.add('animate-in');
+ }, 200);
+ }, 100);
+ }
+
+ // Special handling for profile section
+ if (element.classList.contains('profile')) {
+ setTimeout(() => {
+ const requirements = element.querySelector('.profile__requirements');
+ const desired = element.querySelector('.profile__desired');
+
+ if (requirements) requirements.classList.add('animate-in');
+ setTimeout(() => {
+ if (desired) desired.classList.add('animate-in');
+ }, 200);
+ }, 100);
+ }
+
+ // Unobserve element after animation is triggered
+ observer.unobserve(element);
+ }
+ });
+ }, observerOptions);
+
+ // Observe all sections
+ const sections = $$('section:not(.hero)');
+ sections.forEach(section => {
+ observer.observe(section);
+ });
+
+ // Observe section headers
+ const headers = $$('.section-header');
+ headers.forEach(header => {
+ observer.observe(header);
+ });
+
+ // Observe individual elements that need animation
+ const animatedElements = $$('.benefit-card, .process__step, .faq__item');
+ animatedElements.forEach(element => {
+ observer.observe(element);
+ });
+}
+
+// ==============================================
+// INITIALIZATION
+// ==============================================
+
+function init() {
+ initMobileNav();
+ initAnimatedHeadline();
+ initSmoothScrolling();
+ initHeroCarousel();
+ initTestimonialsCarousel();
+ initImageCarousel();
+ initApplicationForm();
+ initFAQAccordions();
+ initScrollAnimations();
+ initAnalyticsTracking();
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+} else {
+ init();
+}
+
+// Handle page visibility changes (for analytics)
+document.addEventListener('visibilitychange', () => {
+ if (document.visibilityState === 'hidden' && typeof gtag !== 'undefined') {
+ gtag('event', 'page_exit', {
+ event_category: 'engagement',
+ value: Math.round(performance.now() / 1000)
+ });
+ }
+});
\ No newline at end of file
diff --git a/privacy.html b/privacy.html
new file mode 100644
index 0000000..41eb67f
--- /dev/null
+++ b/privacy.html
@@ -0,0 +1,268 @@
+
+
+
+
+
+ Política de Privacidad — Vanity Experience
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ En Vanity Experience valoramos y respetamos tu privacidad. Esta Política de Privacidad describe cómo recopilamos, usamos y protegemos la información personal que nos compartes a través del sitio de reclutamiento unirse.vanityexperience.mx .
+
+
+
+ 1. Responsable del tratamiento de datos
+
+ El responsable de tus datos personales es Vanity Experience , con domicilio en Saltillo, Coahuila, México. Para cualquier duda o ejercicio de derechos relacionados con esta política, puedes escribir a:
+ privacy@vanityexperience.mx .
+
+
+
+
+ 2. Datos que recopilamos
+ A través de nuestro formulario de reclutamiento podemos solicitarte, de manera enunciativa más no limitativa, los siguientes datos:
+
+ Nombre y apellidos
+ Número de celular
+ Estado civil, estudios y experiencia laboral
+ Habilidades y certificaciones
+ Disponibilidad de turnos y fechas de inicio
+ Links a redes sociales profesionales o portafolios digitales
+
+
+
+
+ 3. Finalidad del uso de los datos
+ Tus datos personales se utilizan únicamente para los siguientes fines:
+
+ Gestionar tu postulación al proceso de reclutamiento.
+ Evaluar tu perfil, experiencia y compatibilidad con nuestras vacantes.
+ Mantener comunicación contigo durante el proceso.
+ Generar estadísticas internas sobre la composición de nuestro equipo.
+
+ Vanity Experience no comparte, vende ni entrega tus datos personales a terceros para fines distintos al reclutamiento.
+
+
+
+ 4. Conservación y almacenamiento
+
+ La información recopilada se procesa y almacena en plataformas digitales internas y en la nube, bajo medidas de seguridad administrativas, técnicas y físicas que buscan proteger tu información contra pérdida, uso indebido, acceso no autorizado o divulgación.
+
+
+
+
+ 5. Derechos de las personas titulares
+
+ En cualquier momento puedes ejercer tus derechos de acceso, rectificación, cancelación y oposición (ARCO), así como revocar el consentimiento otorgado.
+
+
+ Para ello, envía un correo a privacy@vanityexperience.mx con tu solicitud. Tu petición será atendida en un plazo no mayor a 6 días hábiles a partir de la recepción.
+
+
+
+
+ 6. Cambios a la política
+
+ Vanity Experience puede modificar o actualizar esta Política de Privacidad en cualquier momento. Los cambios serán publicados en este mismo sitio:
+ 👉 https://unirse.vanityexperience.mx/privacy
+
+
+
+
+ 7. Aceptación
+
+ Al enviar tu información a través del formulario de reclutamiento, confirmas que has leído y aceptado esta Política de Privacidad.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/thanks.html b/thanks.html
new file mode 100644
index 0000000..c941aa3
--- /dev/null
+++ b/thanks.html
@@ -0,0 +1,326 @@
+
+
+
+
+
+ ¡Gracias por aplicar! — Vanity
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
¡Aplicación recibida!
+
+
+ Gracias por tu interés en formar parte del equipo Vanity.
+ Hemos recibido tu aplicación correctamente.
+
+
+
+ Número de folio:
+ ...
+
+
+
+
+
+
+
+
+
+
+
+
+
1
+
+
Revisión de aplicación
+
24-48 horas
+
Nuestro equipo de Recursos Humanos revisará tu aplicación y portafolio cuidadosamente.
+
+
+
+
+
2
+
+
Primer contacto
+
2-3 días hábiles
+
Te contactaremos vía WhatsApp para confirmar tu interés y programar una entrevista.
+
+
+
+
+
3
+
+
Entrevista personal
+
1 semana
+
Conversaremos sobre tus objetivos, experiencia y cómo encajas en nuestro equipo.
+
+
+
+
+
4
+
+
Prueba técnica
+
Si avanzas
+
Demostración práctica de tus habilidades en tu área de especialidad.
+
+
+
+
+
+
+
+
+
+
+
+
📱
+
+
Mantén tu WhatsApp activo
+
Te contactaremos por WhatsApp, así que mantén tu teléfono disponible y revisa tus mensajes regularmente.
+
+
+
+
+
📧
+
+
Revisa tu email
+
También enviaremos actualizaciones por email. Verifica tu bandeja de entrada y spam.
+
+
+
+
+
⏰
+
+
Tiempo de respuesta
+
Si no tienes noticias nuestras en una semana, no dudes en contactarnos directamente.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file