diff --git a/front/public/images/extra.jpg b/front/public/images/extra.jpg
new file mode 100644
index 0000000..9c26bd2
Binary files /dev/null and b/front/public/images/extra.jpg differ
diff --git a/front/src/components/WebPage.vue b/front/src/components/WebPage.vue
index 1abbfeb..e3c7542 100644
--- a/front/src/components/WebPage.vue
+++ b/front/src/components/WebPage.vue
@@ -1,445 +1,90 @@
-<!-- components/ContenidoPrincipal.vue -->
+<!-- ContenidoPrincipal.vue (refactorizado) -->
 <template>
   <NavbarModerno />
 
   <div class="main-content">
-    <!-- Hero Section Moderno -->
-    <section class="modern-hero">
-      <div class="hero-container">
-        <div class="hero-content">
-          <a-tag color="blue" class="hero-tag">Nueva Convocatoria 2024</a-tag>
-          <h1 class="hero-title">
-            Tu futuro comienza
-            <span class="gradient-text">aquí</span>
-          </h1>
-          <p class="hero-subtitle">
-            Forma parte de la comunidad universitaria más prestigiosa del país.
-            <br>Admisión 2024-I | Inscripciones abiertas
-          </p>
-          <div class="hero-actions">
-            <a-button type="primary" size="large" class="cta-button" @click="scrollToConvocatoria">
-              <template #icon><RightCircleOutlined /></template>
-              Postular Ahora
-            </a-button>
-            <a-button size="large" class="secondary-button" @click="openVirtualTour">
-              <template #icon><PlayCircleOutlined /></template>
-              Tour Virtual
-            </a-button>
-          </div>
-        </div>
-        <div class="hero-visual">
-          <div class="floating-card">
-            <div class="card-header">
-              <CalendarOutlined />
-              <span>Próximo Evento</span>
-            </div>
-            <h3>Charla Informativa</h3>
-            <p>25 Nov | 4:00 PM - Virtual</p>
-            <a-button type="link" size="small">Registrarse</a-button>
-          </div>
-        </div>
-      </div>
-    </section>
+    <!-- Hero Section -->
+    <HeroSection 
+      @scroll-to-convocatoria="scrollToConvocatoria"
+      @virtual-tour="openVirtualTour"
+    />
 
-    <!-- Sección de Proceso de Admisión -->
-    <section class="process-section">
-      <div class="section-container">
-        <div class="section-header">
-          <h2 class="section-title">Proceso de Admisión 2024</h2>
-          <p class="section-subtitle">Sigue estos pasos para formar parte de nuestra comunidad universitaria</p>
-        </div>
-        
-        <div class="process-timeline">
-          <a-steps :current="2" class="modern-steps">
-            <a-step title="Inscripción" description="20 Oct - 30 Nov" />
-            <a-step title="Validación" description="1 - 5 Dic" />
-            <a-step title="Examen" description="15 Diciembre" />
-            <a-step title="Resultados" description="20 Diciembre" />
-            <a-step title="Matrícula" description="8 - 12 Ene" />
-          </a-steps>
-        </div>
-      </div>
-    </section>
+    <!-- Proceso de Admisión -->
+    <ProcessSection />
 
-    <!-- Sección de Convocatorias (Principal) -->
-    <section id="convocatorias" class="convocatorias-modern">
-      <div class="section-container">
-        <div class="section-header">
-          <div class="header-with-badge">
-            <h2 class="section-title">Convocatorias Vigentes</h2>
-            <a-badge count="Nuevo" class="new-badge" />
-          </div>
-          <p class="section-subtitle">Selecciona el proceso de admisión que se ajuste a tu perfil</p>
-        </div>
+    <!-- Convocatorias -->
+    <ConvocatoriasSection 
+      @show-modal="showModal"
+      @open-preinscripcion="openPreinscripcion"
+    />
 
-        <div class="convocatorias-grid">
-          <!-- Convocatoria Principal -->
-          <a-card class="main-convocatoria-card">
-            <div class="card-badge">Principal</div>
-            <div class="convocatoria-header">
-              <div>
-                <h3>Admisión Ordinaria 2024-I</h3>
-                <p class="convocatoria-date">Inscripciones: 20 Oct - 30 Nov 2023</p>
-              </div>
-              <a-tag color="success" class="status-tag">Abierto</a-tag>
-            </div>
-            
-            <p class="convocatoria-desc">
-              Proceso de admisión general para todas las carreras profesionales de pregrado.
-              Examen de conocimientos: 15 de diciembre 2023.
-            </p>
-            
-            <a-divider class="custom-divider" />
-            
-            <div class="quick-actions">
-              <h4>Acciones Rápidas</h4>
-              <div class="action-buttons-grid">
-                <a-button class="action-btn" @click="showModal('requisitos')">
-                  <template #icon><FileTextOutlined /></template>
-                  Requisitos
-                </a-button>
-                <a-button class="action-btn" @click="showModal('pagos')">
-                  <template #icon><DollarOutlined /></template>
-                  Pagos
-                </a-button>
-                <a-button class="action-btn" @click="showModal('vacantes')">
-                  <template #icon><TeamOutlined /></template>
-                  Vacantes
-                </a-button>
-                <a-button class="action-btn" @click="showModal('cronograma')">
-                  <template #icon><CalendarOutlined /></template>
-                  Cronograma
-                </a-button>
-              </div>
-            </div>
-            
-            <a-divider class="custom-divider" />
-            
-            <div class="preinscripcion-section">
-              <div class="preinscripcion-info">
-                <h4>Preinscripción en Línea</h4>
-                <p>Completa tu preinscripción de manera digital y segura</p>
-              </div>
-              <a-button type="primary" size="large" class="preinscripcion-btn" @click="openPreinscripcion">
-                <template #icon><FormOutlined /></template>
-                Iniciar Preinscripción
-              </a-button>
-            </div>
-          </a-card>
+    <!-- Programas Académicos -->
+    <ProgramasSection :facultades="facultades" />
 
-          <!-- Otras convocatorias -->
-          <a-card class="secondary-convocatoria-card" v-for="conv in otrasConvocatorias" :key="conv.id">
-            <div class="convocatoria-header">
-              <div>
-                <h4>{{ conv.titulo }}</h4>
-                <p class="convocatoria-date">{{ conv.fecha }}</p>
-              </div>
-              <a-tag :color="conv.estadoColor" class="status-tag">{{ conv.estado }}</a-tag>
-            </div>
-            <p class="convocatoria-desc">{{ conv.descripcion }}</p>
-            <div class="card-footer">
-              <a-button type="link" size="small">Ver detalles</a-button>
-              <a-button type="primary" ghost size="small">Consultar</a-button>
-            </div>
-          </a-card>
-        </div>
-      </div>
-    </section>
+    <!-- Estadísticas -->
+    <StatsSection />
 
-    <!-- Sección de Programas Académicos -->
-    <section class="programas-section">
-      <div class="section-container">
-        <div class="section-header">
-          <h2 class="section-title">Programas Académicos</h2>
-          <p class="section-subtitle">Explora nuestra oferta académica de pregrado y posgrado</p>
-        </div>
+    <!-- Noticias -->
+    <NoticiasSection :noticias="noticias" />
 
-        <div class="facultades-tabs">
-          <a-tabs v-model:activeKey="facultadActiva">
-            <a-tab-pane v-for="facultad in facultades" :key="facultad.id" :tab="facultad.nombre">
-              <div class="carreras-grid">
-                <a-card v-for="carrera in facultad.carreras" :key="carrera.id" class="carrera-card">
-                  <div class="carrera-header">
-                    <div class="carrera-icon">
-                      <component :is="carrera.icono" />
-                    </div>
-                    <div>
-                      <h4>{{ carrera.nombre }}</h4>
-                      <p class="carrera-grado">{{ carrera.grado }}</p>
-                    </div>
-                  </div>
-                  <p class="carrera-desc">{{ carrera.descripcion }}</p>
-                  <div class="carrera-stats">
-                    <span><UserOutlined /> Vacantes: {{ carrera.vacantes }}</span>
-                    <span><TrophyOutlined /> Puntaje: {{ carrera.puntaje }}</span>
-                  </div>
-                  <a-button type="link" size="small" class="carrera-link">Ver plan de estudios</a-button>
-                </a-card>
-              </div>
-            </a-tab-pane>
-          </a-tabs>
-        </div>
-      </div>
-    </section>
+    <!-- Modalidades -->
+    <ModalidadesSection :modalidades="modalidades" />
 
-    <!-- Sección de Estadísticas -->
-    <section class="stats-section">
-      <div class="section-container">
-        <div class="stats-grid">
-          <div class="stat-card">
-            <h3>25+</h3>
-            <p>Carreras Profesionales</p>
-          </div>
-          <div class="stat-card">
-            <h3>98%</h3>
-            <p>Indice de Satisfacción</p>
-          </div>
-          <div class="stat-card">
-            <h3>15,000+</h3>
-            <p>Estudiantes Activos</p>
-          </div>
-          <div class="stat-card">
-            <h3>85%</h3>
-            <p>Egresados Laborando</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Sección de Noticias y Comunicados -->
-    <section class="noticias-modern">
-      <div class="section-container">
-        <div class="section-header">
-          <h2 class="section-title">Noticias y Comunicados</h2>
-          <a-button type="link" class="view-all">Ver todos</a-button>
-        </div>
-
-        <div class="noticias-grid-modern">
-          <a-card v-for="noticia in noticias" :key="noticia.id" class="noticia-card-modern">
-            <div class="noticia-image" :style="{ backgroundImage: `url(${noticia.imagen})` }">
-              <a-tag :color="noticia.tagColor" class="noticia-tag">{{ noticia.categoria }}</a-tag>
-            </div>
-            <div class="noticia-content">
-              <div class="noticia-meta">
-                <CalendarOutlined />
-                <span>{{ noticia.fecha }}</span>
-              </div>
-              <h4>{{ noticia.titulo }}</h4>
-              <p>{{ noticia.descripcion }}</p>
-              <a-button type="link" size="small">Leer más</a-button>
-            </div>
-          </a-card>
-        </div>
-      </div>
-    </section>
-
-    <!-- Sección de Modalidades -->
-    <section class="modalidades-section">
-      <div class="section-container">
-        <div class="section-header">
-          <h2 class="section-title">Modalidades de Admisión</h2>
-          <p class="section-subtitle">Diferentes formas de ingresar a nuestra universidad</p>
-        </div>
-
-        <div class="modalidades-grid">
-          <a-card v-for="modalidad in modalidades" :key="modalidad.id" class="modalidad-card">
-            <div class="modalidad-icon" :style="{ backgroundColor: modalidad.color }">
-              <component :is="modalidad.icono" />
-            </div>
-            <h4>{{ modalidad.nombre }}</h4>
-            <p>{{ modalidad.descripcion }}</p>
-            <a-tag :color="modalidad.estadoColor" class="modalidad-status">
-              {{ modalidad.estado }}
-            </a-tag>
-          </a-card>
-        </div>
-      </div>
-    </section>
-
-    <!-- Sección de Contacto -->
-    <section class="contact-section">
-      <div class="section-container">
-        <div class="contact-grid">
-          <div class="contact-info">
-            <h2 class="section-title">¿Necesitas Ayuda?</h2>
-            <p class="contact-subtitle">Nuestro equipo está listo para asistirte en todo el proceso de admisión</p>
-            
-            <div class="contact-methods">
-              <div class="contact-method">
-                <PhoneOutlined />
-                <div>
-                  <h4>Teléfono</h4>
-                  <p>(01) 123-4567</p>
-                </div>
-              </div>
-              <div class="contact-method">
-                <MailOutlined />
-                <div>
-                  <h4>Email</h4>
-                  <p>admision@universidad.edu.pe</p>
-                </div>
-              </div>
-              <div class="contact-method">
-                <ClockCircleOutlined />
-                <div>
-                  <h4>Horario</h4>
-                  <p>Lun-Vie: 8:00 AM - 6:00 PM</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <div class="contact-form">
-            <h3>Envíanos un Mensaje</h3>
-            <a-form layout="vertical">
-              <a-form-item label="Nombre completo">
-                <a-input placeholder="Ingresa tu nombre completo" />
-              </a-form-item>
-              <a-form-item label="Email">
-                <a-input placeholder="tu@email.com" />
-              </a-form-item>
-              <a-form-item label="Consulta">
-                <a-textarea placeholder="Describe tu consulta..." :rows="4" />
-              </a-form-item>
-              <a-button type="primary" block>Enviar Mensaje</a-button>
-            </a-form>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Modal de Preinscripción -->
-    <a-modal 
-      v-model:visible="preinscripcionModalVisible" 
-      title="Preinscripción en Línea" 
-      width="600px"
-      :footer="null"
-      class="modern-modal"
-    >
-      <div class="modal-steps">
-        <a-steps :current="0" size="small">
-          <a-step title="Datos Personales" />
-          <a-step title="Programa" />
-          <a-step title="Documentos" />
-          <a-step title="Confirmación" />
-        </a-steps>
-      </div>
-      
-      <a-form layout="vertical" class="modal-form">
-        <h3>Información Personal</h3>
-        
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="Nombres">
-              <a-input placeholder="Ingresa tus nombres" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="Apellidos">
-              <a-input placeholder="Ingresa tus apellidos" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-form-item label="Correo Electrónico">
-          <a-input type="email" placeholder="ejemplo@correo.com" />
-        </a-form-item>
-        
-        <a-form-item label="Programa de Interés">
-          <a-select placeholder="Selecciona un programa">
-            <a-select-option v-for="facultad in facultades" :key="facultad.id">
-              <optgroup :label="facultad.nombre">
-                <a-select-option v-for="carrera in facultad.carreras" :key="carrera.id" :value="carrera.id">
-                  {{ carrera.nombre }}
-                </a-select-option>
-              </optgroup>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        
-        <a-form-item>
-          <a-checkbox>
-            Acepto los términos y condiciones del proceso de admisión
-          </a-checkbox>
-        </a-form-item>
-        
-        <div class="modal-actions">
-          <a-button @click="preinscripcionModalVisible = false">Cancelar</a-button>
-          <a-button type="primary" @click="submitPreinscripcion">Continuar</a-button>
-        </div>
-      </a-form>
-    </a-modal>
+    <!-- Contacto -->
+    <ContactSection />
   </div>
 
-    <FooterModerno />
+  <!-- Modal de Preinscripción -->
+  <PreinscripcionModal 
+    v-model:visible="preinscripcionModalVisible"
+    :facultades="facultades"
+    @submit="submitPreinscripcion"
+  />
+
+  <FooterModerno />
 </template>
 
 <script setup>
 import { ref } from 'vue'
+
+// Components
+import NavbarModerno from '../components/nabvar.vue'
+import FooterModerno from '../components/footer.vue'
+
+// Secciones
+import HeroSection from './WebPageSections/HeroSection.vue'
+import ProcessSection from './WebPageSections/ProcessSection.vue'
+import ConvocatoriasSection from './WebPageSections/ConvocatoriasSection.vue'
+import ProgramasSection from './WebPageSections/ProgramasSection.vue'
+import StatsSection from './WebPageSections/StatsSection.vue'
+import NoticiasSection from './WebPageSections/NoticiasSection.vue'
+import ModalidadesSection from './WebPageSections/ModalidadesSection.vue'
+import ContactSection from './WebPageSections/ContactSection.vue'
+import PreinscripcionModal from './WebPageSections//modal/PreinscripcionModal.vue'
+
+// Iconos para programas y modalidades
 import { 
-  RightCircleOutlined,
-  PlayCircleOutlined,
-  CalendarOutlined,
-  FileTextOutlined,
-  DollarOutlined,
-  TeamOutlined,
-  FormOutlined,
-  UserOutlined,
-  TrophyOutlined,
-  PhoneOutlined,
-  MailOutlined,
-  ClockCircleOutlined,
   MedicineBoxOutlined,
   BuildOutlined,
-  BarChartOutlined,
-  BookOutlined,
-  ExperimentOutlined,
   CodeOutlined,
-  BankOutlined
+  BookOutlined,
+  TrophyOutlined,
+  BankOutlined,
+  ExperimentOutlined
 } from '@ant-design/icons-vue'
-import NavbarModerno from '../components/nabvar.vue'
 
-import FooterModerno from '../components/footer.vue'
 // Estado
-const facultadActiva = ref('1')
 const preinscripcionModalVisible = ref(false)
 
-// Otras convocatorias
-const otrasConvocatorias = ref([
-  {
-    id: 1,
-    titulo: 'Admisión Extraordinaria',
-    fecha: '5 - 15 Ene 2024',
-    descripcion: 'Para postulantes con talentos especiales',
-    estado: 'Próximamente',
-    estadoColor: 'orange'
-  },
-  {
-    id: 2,
-    titulo: 'Traslado Externo',
-    fecha: 'Abril 2024',
-    descripcion: 'Para estudiantes de otras universidades',
-    estado: 'Cerrado',
-    estadoColor: 'red'
-  },
-  {
-    id: 3,
-    titulo: 'Evaluación de Talentos',
-    fecha: 'Feb 2024',
-    descripcion: 'Deportistas, artistas y líderes',
-    estado: 'Próximamente',
-    estadoColor: 'orange'
-  }
-])
+// Datos
 
-// Facultades y carreras
 const facultades = ref([
   {
     id: '1',
     nombre: 'Ciencias de la Salud',
     carreras: [
       { id: 1, nombre: 'Medicina Humana', grado: 'Bachiller', descripcion: 'Formación médica integral con prácticas desde primer año', vacantes: 50, puntaje: '1800+', icono: MedicineBoxOutlined },
-      { id: 2, nombre: 'Enfermería', grado: 'Bachiller', descripcion: 'Cuidado integral de la salud', vacantes: 60, puntaje: '1500+', icono: UserOutlined }
+      { id: 2, nombre: 'Enfermería', grado: 'Bachiller', descripcion: 'Cuidado integral de la salud', vacantes: 60, puntaje: '1500+', icono: 'UserOutlined' }
     ]
   },
   {
@@ -455,12 +100,11 @@ const facultades = ref([
     nombre: 'Derecho y Humanidades',
     carreras: [
       { id: 5, nombre: 'Derecho', grado: 'Bachiller', descripcion: 'Formación jurídica integral', vacantes: 120, puntaje: '1550+' },
-      { id: 6, nombre: 'Psicología', grado: 'Bachiller', descripcion: 'Ciencias del comportamiento humano', vacantes: 70, puntaje: '1450+', icono: UserOutlined }
+      { id: 6, nombre: 'Psicología', grado: 'Bachiller', descripcion: 'Ciencias del comportamiento humano', vacantes: 70, puntaje: '1450+', icono: 'UserOutlined' }
     ]
   }
 ])
 
-// Modalidades
 const modalidades = ref([
   { id: 1, nombre: 'Admisión Ordinaria', descripcion: 'Examen de conocimientos generales', estado: 'Abierto', estadoColor: 'success', color: '#1890ff', icono: BookOutlined },
   { id: 2, nombre: 'Evaluación de Talentos', descripcion: 'Para deportistas y artistas destacados', estado: 'Próximamente', estadoColor: 'orange', color: '#faad14', icono: TrophyOutlined },
@@ -468,7 +112,6 @@ const modalidades = ref([
   { id: 4, nombre: 'Segunda Carrera', descripcion: 'Para profesionales graduados', estado: 'Abierto', estadoColor: 'success', color: '#52c41a', icono: ExperimentOutlined }
 ])
 
-// Noticias
 const noticias = ref([
   {
     id: 1,
@@ -524,617 +167,7 @@ const submitPreinscripcion = () => {
 </script>
 
 <style scoped>
-/* Todos los estilos del contenido principal van aquí */
-/* (Copiar todos los estilos del original excepto los del header y footer) */
-
-/* Hero Moderno */
-.modern-hero {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 80px 0;
-}
-
-.hero-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 80px;
-  align-items: center;
-}
-
-.hero-tag {
-  background: rgba(255, 255, 255, 0.2);
-  border: none;
-  color: white;
-  margin-bottom: 24px;
-}
-
-.hero-title {
-  font-size: 3.5rem;
-  font-weight: 800;
-  line-height: 1.1;
-  margin-bottom: 24px;
-}
-
-.gradient-text {
-  background: linear-gradient(45deg, #ffd700, #ff6b6b);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.hero-subtitle {
-  font-size: 1.25rem;
-  opacity: 0.9;
-  margin-bottom: 32px;
-  line-height: 1.6;
-}
-
-.hero-actions {
-  display: flex;
-  gap: 16px;
-}
-
-.cta-button {
-  background: white;
-  border: none;
-  color: #1a237e;
-  font-weight: 600;
-}
-
-.secondary-button {
-  background: transparent;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  color: white;
-}
-
-.floating-card {
-  background: white;
-  color: #333;
-  padding: 24px;
-  border-radius: 12px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #666;
-  margin-bottom: 16px;
-}
-
-/* Secciones comunes */
-.section-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-
-.section-header {
-  text-align: center;
-  margin-bottom: 60px;
-}
-
-.section-title {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: #1a237e;
-  margin-bottom: 16px;
-}
-
-.section-subtitle {
-  font-size: 1.125rem;
-  color: #666;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.header-with-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-}
-
-.new-badge :deep(.ant-badge-count) {
-  background: linear-gradient(45deg, #ff6b6b, #ffd700);
-  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
-}
-
-/* Proceso */
-.process-section {
-  padding: 80px 0;
-  background: #f8f9fa;
-}
-
-.modern-steps {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.modern-steps :deep(.ant-steps-item-title) {
-  font-weight: 600;
-}
-
-/* Convocatorias */
-.convocatorias-modern {
-  padding: 80px 0;
-}
-
-.convocatorias-grid {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 24px;
-}
-
-@media (max-width: 768px) {
-  .convocatorias-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.main-convocatoria-card {
-  position: relative;
-  border: none;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
-  border-radius: 16px;
-  padding: 32px;
-}
-
-.card-badge {
-  position: absolute;
-  top: -12px;
-  left: 24px;
-  background: linear-gradient(45deg, #1890ff, #52c41a);
-  color: white;
-  padding: 6px 16px;
-  border-radius: 20px;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.convocatoria-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 20px;
-}
-
-.convocatoria-header h3 {
-  margin: 0;
-  font-size: 1.5rem;
-  color: #1a237e;
-}
-
-.convocatoria-date {
-  color: #666;
-  margin: 8px 0 0;
-}
-
-.status-tag {
-  font-weight: 600;
-  padding: 4px 12px;
-  border-radius: 20px;
-}
-
-.convocatoria-desc {
-  color: #666;
-  line-height: 1.6;
-  margin-bottom: 24px;
-}
-
-.custom-divider {
-  margin: 24px 0;
-}
-
-.action-buttons-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 48px;
-}
-
-.preinscripcion-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 24px;
-}
-
-.preinscripcion-info h4 {
-  margin: 0 0 8px;
-  color: #1a237e;
-}
-
-.preinscripcion-btn {
-  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
-  border: none;
-  height: 56px;
-  font-weight: 600;
-}
-
-.secondary-convocatoria-card {
-  border: none;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-
-/* Programas */
-.programas-section {
-  padding: 80px 0;
-  background: #f8f9fa;
-}
-
-.facultades-tabs :deep(.ant-tabs-nav) {
-  margin-bottom: 40px;
-}
-
-.carreras-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
-}
-
-.carrera-card {
-  border: none;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
-  transition: transform 0.3s ease;
-}
-
-.carrera-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-}
-
-.carrera-header {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.carrera-icon {
-  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
-  color: white;
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-}
-
-.carrera-header h4 {
-  margin: 0;
-  color: #1a237e;
-}
-
-.carrera-grado {
-  color: #666;
-  font-size: 0.875rem;
-  margin: 4px 0 0;
-}
-
-.carrera-desc {
-  color: #666;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  margin-bottom: 16px;
-}
-
-.carrera-stats {
-  display: flex;
-  justify-content: space-between;
-  color: #666;
-  font-size: 0.875rem;
-  margin-bottom: 16px;
-}
-
-.carrera-link {
-  color: #1890ff;
-  font-weight: 500;
-}
-
-/* Estadísticas */
-.stats-section {
-  padding: 60px 0;
-  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
-  color: white;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 40px;
-  text-align: center;
-}
-
-.stat-card h3 {
-  font-size: 3rem;
-  font-weight: 800;
-  margin: 0;
-  background: linear-gradient(45deg, #ffd700, #ff6b6b);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.stat-card p {
-  font-size: 1rem;
-  opacity: 0.9;
-  margin: 8px 0 0;
-}
-
-/* Noticias */
-.noticias-modern {
-  padding: 80px 0;
-}
-
-.view-all {
-  color: #1890ff;
-  font-weight: 500;
-}
-
-.noticias-grid-modern {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: 32px;
-}
-
-.noticia-card-modern {
-  border: none;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  transition: transform 0.3s ease;
-}
-
-.noticia-card-modern:hover {
-  transform: translateY(-4px);
-}
-
-.noticia-image {
-  height: 200px;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-}
-
-.noticia-tag {
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  border: none;
-  font-weight: 500;
-}
-
-.noticia-content {
-  padding: 24px;
-}
-
-.noticia-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #666;
-  font-size: 0.875rem;
-  margin-bottom: 12px;
-}
-
-.noticia-content h4 {
-  margin: 0 0 12px;
-  color: #1a237e;
-  font-size: 1.125rem;
-}
-
-.noticia-content p {
-  color: #666;
-  line-height: 1.5;
-  margin-bottom: 16px;
-}
-
-/* Modalidades */
-.modalidades-section {
-  padding: 80px 0;
-  background: #f8f9fa;
-}
-
-.modalidades-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 24px;
-}
-
-.modalidad-card {
-  border: none;
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  text-align: center;
-  padding: 32px 24px;
-  transition: transform 0.3s ease;
-}
-
-.modalidad-card:hover {
-  transform: translateY(-4px);
-}
-
-.modalidad-icon {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 20px;
-  color: white;
-  font-size: 28px;
-}
-
-.modalidad-card h4 {
-  margin: 0 0 12px;
-  color: #1a237e;
-}
-
-.modalidad-card p {
-  color: #666;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  margin-bottom: 16px;
-}
-
-.modalidad-status {
-  font-weight: 500;
-  padding: 4px 16px;
-  border-radius: 20px;
-}
-
-/* Contacto */
-.contact-section {
-  padding: 80px 0;
-}
-
-.contact-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 80px;
-  align-items: start;
-}
-
-.contact-subtitle {
-  color: #666;
-  font-size: 1.125rem;
-  margin-bottom: 40px;
-}
-
-.contact-methods {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.contact-method {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.contact-method svg {
-  color: #1890ff;
-  font-size: 24px;
-}
-
-.contact-method h4 {
-  margin: 0 0 4px;
-  color: #1a237e;
-}
-
-.contact-method p {
-  margin: 0;
-  color: #666;
-}
-
-.contact-form {
-  background: white;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
-}
-
-.contact-form h3 {
-  margin: 0 0 32px;
-  color: #1a237e;
-}
-
-/* Modal Moderno */
-.modern-modal :deep(.ant-modal-content) {
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.modern-modal :deep(.ant-modal-header) {
-  border-bottom: none;
-  padding: 32px 32px 0;
-}
-
-.modern-modal :deep(.ant-modal-body) {
-  padding: 32px;
-}
-
-.modern-modal :deep(.ant-modal-title) {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #1a237e;
-}
-
-.modal-steps {
-  margin-bottom: 32px;
-}
-
-.modal-form h3 {
-  margin: 0 0 24px;
-  color: #1a237e;
-}
-
-.modal-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  margin-top: 32px;
-}
-
-/* Responsive */
-@media (max-width: 992px) {
-  .hero-container {
-    grid-template-columns: 1fr;
-    text-align: center;
-    gap: 48px;
-  }
-  
-  .hero-title {
-    font-size: 2.5rem;
-  }
-  
-  .contact-grid {
-    grid-template-columns: 1fr;
-    gap: 48px;
-  }
-  
-  .hero-actions {
-    flex-direction: column;
-  }
-  
-  .section-title {
-    font-size: 2rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .hero-title {
-    font-size: 2rem;
-  }
-  
-  .preinscripcion-section {
-    flex-direction: column;
-    text-align: center;
-  }
+.main-content {
+  min-height: 100vh;
 }
 </style>
\ No newline at end of file
diff --git a/front/src/components/WebPageSections/ContactSection.vue b/front/src/components/WebPageSections/ContactSection.vue
new file mode 100644
index 0000000..3119d59
--- /dev/null
+++ b/front/src/components/WebPageSections/ContactSection.vue
@@ -0,0 +1,139 @@
+<!-- components/contact/ContactSection.vue -->
+<template>
+  <section class="contact-section">
+    <div class="section-container">
+      <div class="contact-grid">
+        <div class="contact-info">
+          <h2 class="section-title">¿Necesitas Ayuda?</h2>
+          <p class="contact-subtitle">Nuestro equipo está listo para asistirte en todo el proceso de admisión</p>
+          
+          <div class="contact-methods">
+            <div class="contact-method">
+              <PhoneOutlined />
+              <div>
+                <h4>Teléfono</h4>
+                <p>(01) 123-4567</p>
+              </div>
+            </div>
+            <div class="contact-method">
+              <MailOutlined />
+              <div>
+                <h4>Email</h4>
+                <p>admision@universidad.edu.pe</p>
+              </div>
+            </div>
+            <div class="contact-method">
+              <ClockCircleOutlined />
+              <div>
+                <h4>Horario</h4>
+                <p>Lun-Vie: 8:00 AM - 6:00 PM</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="contact-form">
+          <h3>Envíanos un Mensaje</h3>
+          <a-form layout="vertical">
+            <a-form-item label="Nombre completo">
+              <a-input placeholder="Ingresa tu nombre completo" />
+            </a-form-item>
+            <a-form-item label="Email">
+              <a-input placeholder="tu@email.com" />
+            </a-form-item>
+            <a-form-item label="Consulta">
+              <a-textarea placeholder="Describe tu consulta..." :rows="4" />
+            </a-form-item>
+            <a-button type="primary" block>Enviar Mensaje</a-button>
+          </a-form>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { PhoneOutlined, MailOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
+</script>
+
+<style scoped>
+.contact-section {
+  padding: 80px 0;
+}
+
+.section-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
+  align-items: start;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1a237e;
+  margin-bottom: 16px;
+}
+
+.contact-subtitle {
+  color: #666;
+  font-size: 1.125rem;
+  margin-bottom: 40px;
+}
+
+.contact-methods {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.contact-method {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.contact-method svg {
+  color: #1890ff;
+  font-size: 24px;
+}
+
+.contact-method h4 {
+  margin: 0 0 4px;
+  color: #1a237e;
+}
+
+.contact-method p {
+  margin: 0;
+  color: #666;
+}
+
+.contact-form {
+  background: white;
+  padding: 40px;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+}
+
+.contact-form h3 {
+  margin: 0 0 32px;
+  color: #1a237e;
+}
+
+@media (max-width: 992px) {
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: 48px;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/WebPageSections/ConvocatoriasSection.vue b/front/src/components/WebPageSections/ConvocatoriasSection.vue
new file mode 100644
index 0000000..e8d6497
--- /dev/null
+++ b/front/src/components/WebPageSections/ConvocatoriasSection.vue
@@ -0,0 +1,310 @@
+<!-- components/convocatorias/ConvocatoriasSection.vue -->
+<template>
+  <section id="convocatorias" class="convocatorias-modern">
+    <div class="section-container">
+      <div class="section-header">
+        <div class="header-with-badge">
+          <h2 class="section-title">Convocatorias Vigentes</h2>
+          <a-badge count="Nuevo" class="new-badge" />
+        </div>
+        <p class="section-subtitle">Selecciona el proceso de admisión que se ajuste a tu perfil</p>
+      </div>
+
+      <div class="convocatorias-grid">
+        <!-- Convocatoria Principal -->
+<!-- Convocatoria Principal -->
+<a-card class="main-convocatoria-card">
+  <div class="card-badge">Principal</div>
+
+  <div class="main-card-content">
+
+    <!-- IZQUIERDA: CONTENIDO -->
+    <div class="main-card-text">
+      <div class="convocatoria-header">
+        <div>
+          <h3>Admisión Ordinaria 2024-I</h3>
+          <p class="convocatoria-date">
+            Inscripciones: 20 Oct - 30 Nov 2023
+          </p>
+        </div>
+        <a-tag color="success" class="status-tag">Abierto</a-tag>
+      </div>
+
+      <p class="convocatoria-desc">
+        Proceso de admisión general para todas las carreras profesionales de pregrado.
+        Examen de conocimientos: 15 de diciembre 2023.
+      </p>
+
+      <a-divider class="custom-divider" />
+
+      <div class="quick-actions">
+        <h4>Acciones Rápidas</h4>
+
+        <div class="action-buttons-grid">
+          <a-button class="action-btn" @click="$emit('show-modal', 'requisitos')">
+            <template #icon><FileTextOutlined /></template>
+            Requisitos
+          </a-button>
+
+          <a-button class="action-btn" @click="$emit('show-modal', 'pagos')">
+            <template #icon><DollarOutlined /></template>
+            Pagos
+          </a-button>
+
+          <a-button class="action-btn" @click="$emit('show-modal', 'vacantes')">
+            <template #icon><TeamOutlined /></template>
+            Vacantes
+          </a-button>
+
+          <a-button class="action-btn" @click="$emit('show-modal', 'cronograma')">
+            <template #icon><CalendarOutlined /></template>
+            Cronograma
+          </a-button>
+        </div>
+      </div>
+
+      <a-divider class="custom-divider" />
+
+      <div class="preinscripcion-section">
+        <div class="preinscripcion-info">
+          <h4>Preinscripción en Línea</h4>
+          <p>Completa tu preinscripción de manera digital y segura</p>
+        </div>
+
+        <a-button
+          type="primary"
+          size="large"
+          class="preinscripcion-btn"
+          @click="$emit('open-preinscripcion')"
+        >
+          <template #icon><FormOutlined /></template>
+          Iniciar Preinscripción
+        </a-button>
+      </div>
+    </div>
+
+
+
+  </div>
+</a-card>
+  <!-- IMAGEN DERECHA -->
+  <div class="convocatoria-image-wrapper">
+    <a-image
+      src="/images/extra.jpg"
+      alt="Convocatoria"
+      :preview="true"
+      class="convocatoria-image"
+    />
+  </div>
+
+        <!-- Otras convocatorias -->
+        <a-card class="secondary-convocatoria-card" >
+          <div class="convocatoria-header">
+            <div>
+              <h4>cepreuna</h4>
+              <p class="convocatoria-date">30 de enero</p>
+            </div>
+            <a-tag  class="status-tag">FINALIZADO</a-tag>
+          </div>
+          <p class="convocatoria-desc">postulaNTES DEL CEPRE </p>
+          <div class="card-footer">
+            <a-button type="link" size="small">Ver detalles</a-button>
+            <a-button type="primary" ghost size="small">Consultar</a-button>
+          </div>
+        </a-card>
+                <a-card class="secondary-convocatoria-card" >
+          <div class="convocatoria-header">
+            <div>
+              <h4>cepreuna</h4>
+              <p class="convocatoria-date">30 de enero</p>
+            </div>
+            <a-tag  class="status-tag">FINALIZADO</a-tag>
+          </div>
+          <p class="convocatoria-desc">postulaNTES DEL CEPRE </p>
+          <div class="card-footer">
+            <a-button type="link" size="small">Ver detalles</a-button>
+            <a-button type="primary" ghost size="small">Consultar</a-button>
+          </div>
+        </a-card>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { FileTextOutlined, DollarOutlined, TeamOutlined, CalendarOutlined, FormOutlined } from '@ant-design/icons-vue'
+
+defineProps({
+  otrasConvocatorias: {
+    type: Array,
+    required: true
+  }
+})
+
+defineEmits(['show-modal', 'open-preinscripcion'])
+</script>
+
+<style scoped>
+.convocatorias-modern {
+  padding: 80px 0;
+  font-family: "Times New Roman", Times, serif;
+}
+
+.section-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 2.8rem;
+  font-weight: 700;
+  color: #0d1b52;
+  margin-bottom: 16px;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: #666;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.header-with-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.new-badge :deep(.ant-badge-count) {
+  background: linear-gradient(45deg, #ff6b6b, #ffd700);
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+}
+
+.convocatorias-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 24px;
+}
+
+.main-convocatoria-card {
+  position: relative;
+  border: none;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  padding: 32px;
+}
+
+.card-badge {
+  position: absolute;
+  top: -12px;
+  left: 24px;
+  background: linear-gradient(45deg, #1890ff, #52c41a);
+  color: white;
+  padding: 6px 16px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.convocatoria-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+
+.convocatoria-header h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #1a237e;
+}
+
+.convocatoria-date {
+  color: #666;
+  margin: 8px 0 0;
+}
+
+.status-tag {
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 20px;
+}
+
+.convocatoria-desc {
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 24px;
+}
+
+.custom-divider {
+  margin: 24px 0;
+}
+
+.action-buttons-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 48px;
+}
+
+.preinscripcion-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+}
+
+.preinscripcion-info h4 {
+  margin: 0 0 8px;
+  color: #1a237e;
+}
+
+.preinscripcion-btn {
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  border: none;
+  height: 56px;
+  font-weight: 600;
+}
+
+.secondary-convocatoria-card {
+  border: none;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+  .convocatorias-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .preinscripcion-section {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/WebPageSections/HeroSection.vue b/front/src/components/WebPageSections/HeroSection.vue
new file mode 100644
index 0000000..8c97a15
--- /dev/null
+++ b/front/src/components/WebPageSections/HeroSection.vue
@@ -0,0 +1,147 @@
+<!-- components/hero/HeroSection.vue -->
+<template>
+  <section class="modern-hero">
+    <div class="hero-container">
+      <div class="hero-content">
+        <a-tag color="blue" class="hero-tag">Convocatoria 2026</a-tag>
+        <h1 class="hero-title">
+          Admision
+          <span class="gradient-text">2026</span>
+        </h1>
+        <p class="hero-subtitle">
+          Forma parte de la comunidad universitaria más prestigiosa del país.
+          <br>Admisión 2024-I | Inscripciones abiertas
+        </p>
+        <div class="hero-actions">
+          <a-button type="primary" size="large" class="cta-button" @click="$emit('scroll-to-convocatoria')">
+            <template #icon><RightCircleOutlined /></template>
+            Postular Ahora
+          </a-button>
+          <a-button size="large" class="secondary-button" @click="$emit('virtual-tour')">
+            <template #icon><PlayCircleOutlined /></template>
+            Tour Virtual
+          </a-button>
+        </div>
+      </div>
+      <div class="hero-visual">
+        <div class="floating-card">
+          <div class="card-header">
+            <CalendarOutlined />
+            <span>Próximo Evento</span>
+          </div>
+          <h3>Charla Informativa</h3>
+          <p>25 Nov | 4:00 PM - Virtual</p>
+          <a-button type="link" size="small">Registrarse</a-button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { RightCircleOutlined, PlayCircleOutlined, CalendarOutlined } from '@ant-design/icons-vue'
+
+defineEmits(['scroll-to-convocatoria', 'virtual-tour'])
+</script>
+
+<style scoped>
+.modern-hero {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 80px 0;
+}
+
+.hero-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
+  align-items: center;
+}
+
+.hero-tag {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  margin-bottom: 24px;
+}
+
+.hero-title {
+  font-size: 3.5rem;
+  font-weight: 800;
+  line-height: 1.1;
+  margin-bottom: 24px;
+}
+
+.gradient-text {
+  background: linear-gradient(45deg, #ffd700, #ff6b6b);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subtitle {
+  font-size: 1.25rem;
+  opacity: 0.9;
+  margin-bottom: 32px;
+  line-height: 1.6;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 16px;
+}
+
+.cta-button {
+  background: white;
+  border: none;
+  color: #1a237e;
+  font-weight: 600;
+}
+
+.secondary-button {
+  background: transparent;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  color: white;
+}
+
+.floating-card {
+  background: white;
+  color: #333;
+  padding: 24px;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  margin-bottom: 16px;
+}
+
+@media (max-width: 992px) {
+  .hero-container {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 48px;
+  }
+  
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .hero-actions {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/WebPageSections/ModalidadesSection.vue b/front/src/components/WebPageSections/ModalidadesSection.vue
new file mode 100644
index 0000000..7982daa
--- /dev/null
+++ b/front/src/components/WebPageSections/ModalidadesSection.vue
@@ -0,0 +1,120 @@
+<!-- components/modalidades/ModalidadesSection.vue -->
+<template>
+  <section class="modalidades-section">
+    <div class="section-container">
+      <div class="section-header">
+        <h2 class="section-title">Modalidades de Admisión</h2>
+        <p class="section-subtitle">Diferentes formas de ingresar a nuestra universidad</p>
+      </div>
+
+      <div class="modalidades-grid">
+        <a-card v-for="modalidad in modalidades" :key="modalidad.id" class="modalidad-card">
+          <div class="modalidad-icon" :style="{ backgroundColor: modalidad.color }">
+            <component :is="modalidad.icono" />
+          </div>
+          <h4>{{ modalidad.nombre }}</h4>
+          <p>{{ modalidad.descripcion }}</p>
+          <a-tag :color="modalidad.estadoColor" class="modalidad-status">
+            {{ modalidad.estado }}
+          </a-tag>
+        </a-card>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  modalidades: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+.modalidades-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.section-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1a237e;
+  margin-bottom: 16px;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: #666;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.modalidades-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 24px;
+}
+
+.modalidad-card {
+  border: none;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  text-align: center;
+  padding: 32px 24px;
+  transition: transform 0.3s ease;
+}
+
+.modalidad-card:hover {
+  transform: translateY(-4px);
+}
+
+.modalidad-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  color: white;
+  font-size: 28px;
+}
+
+.modalidad-card h4 {
+  margin: 0 0 12px;
+  color: #1a237e;
+}
+
+.modalidad-card p {
+  color: #666;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.modalidad-status {
+  font-weight: 500;
+  padding: 4px 16px;
+  border-radius: 20px;
+}
+
+@media (max-width: 992px) {
+  .section-title {
+    font-size: 2rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/WebPageSections/NoticiasSection.vue b/front/src/components/WebPageSections/NoticiasSection.vue
new file mode 100644
index 0000000..7fc5f7f
--- /dev/null
+++ b/front/src/components/WebPageSections/NoticiasSection.vue
@@ -0,0 +1,134 @@
+<!-- components/noticias/NoticiasSection.vue -->
+<template>
+  <section class="noticias-modern">
+    <div class="section-container">
+      <div class="section-header">
+        <h2 class="section-title">Noticias y Comunicados</h2>
+        <a-button type="link" class="view-all">Ver todos</a-button>
+      </div>
+
+      <div class="noticias-grid-modern">
+        <a-card v-for="noticia in noticias" :key="noticia.id" class="noticia-card-modern">
+          <div class="noticia-image" :style="{ backgroundImage: `url(${noticia.imagen})` }">
+            <a-tag :color="noticia.tagColor" class="noticia-tag">{{ noticia.categoria }}</a-tag>
+          </div>
+          <div class="noticia-content">
+            <div class="noticia-meta">
+              <CalendarOutlined />
+              <span>{{ noticia.fecha }}</span>
+            </div>
+            <h4>{{ noticia.titulo }}</h4>
+            <p>{{ noticia.descripcion }}</p>
+            <a-button type="link" size="small">Leer más</a-button>
+          </div>
+        </a-card>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { CalendarOutlined } from '@ant-design/icons-vue'
+
+defineProps({
+  noticias: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+.noticias-modern {
+  padding: 80px 0;
+}
+
+.section-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1a237e;
+  margin: 0;
+}
+
+.view-all {
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.noticias-grid-modern {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 32px;
+}
+
+.noticia-card-modern {
+  border: none;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
+}
+
+.noticia-card-modern:hover {
+  transform: translateY(-4px);
+}
+
+.noticia-image {
+  height: 200px;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.noticia-tag {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  border: none;
+  font-weight: 500;
+}
+
+.noticia-content {
+  padding: 24px;
+}
+
+.noticia-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  font-size: 0.875rem;
+  margin-bottom: 12px;
+}
+
+.noticia-content h4 {
+  margin: 0 0 12px;
+  color: #1a237e;
+  font-size: 1.125rem;
+}
+
+.noticia-content p {
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+@media (max-width: 992px) {
+  .section-title {
+    font-size: 2rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/WebPageSections/ProcessSection.vue b/front/src/components/WebPageSections/ProcessSection.vue
new file mode 100644
index 0000000..a68b498
--- /dev/null
+++ b/front/src/components/WebPageSections/ProcessSection.vue
@@ -0,0 +1,115 @@
+<!-- components/process/ProcessSection.vue -->
+<template>
+  <section class="process-section">
+    <div class="section-container">
+      
+      <div class="section-header">
+        <h2 class="section-title">Proceso de Admisión 2026</h2>
+        <p class="section-subtitle">
+          Sigue estos pasos para postular al Examen General 2026-I
+        </p>
+      </div>
+      
+      <div class="process-timeline">
+        <a-steps :current="2" class="modern-steps">
+          <a-step title="Preinscripción Virtual" description="20 Oct - 30 Nov" />
+          <a-step title="Inscripción Presencial" description="1 - 5 Dic" />
+          <a-step title="Examen" description="15 Diciembre" />
+          <a-step title="Resultados" description="20 Diciembre" />
+          <a-step title="Control Biométrico Ingresantes" description="8 - 12 Ene" />
+        </a-steps>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.process-section {
+  padding: 30px 0; /* mucho menos espacio */
+  background: #ffffff; /* quitamos el gris */
+  font-family: "Times New Roman", Times, serif;
+}
+
+.section-container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 25px; /* reducido */
+}
+
+.section-title {
+  font-size: 2.1rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin: 0 0 6px 0; /* sin espacio exagerado */
+  line-height: 1.2;
+}
+
+.section-subtitle {
+  font-size: 1rem;
+  color: #777;
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* ====== STEPS ====== */
+
+.process-timeline {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.modern-steps {
+  padding: 15px 10px; /* MUY compacto */
+}
+
+/* QUITAR ESPACIO EXTRA DE ANT DESIGN */
+.modern-steps :deep(.ant-steps-item) {
+  padding-bottom: 0;
+}
+
+.modern-steps :deep(.ant-steps-item-title) {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #34495e;
+  line-height: 1.2;
+}
+
+.modern-steps :deep(.ant-steps-item-description) {
+  font-size: 0.8rem;
+  color: #888;
+  margin-top: 2px;
+}
+
+/* Iconos más pequeños */
+.modern-steps :deep(.ant-steps-item-icon) {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 13px;
+}
+
+/* Línea más fina */
+.modern-steps :deep(.ant-steps-item-tail::after) {
+  height: 2px;
+  background: #dfe6e9;
+}
+
+/* Step activo */
+.modern-steps :deep(.ant-steps-item-process .ant-steps-item-icon) {
+  background-color: #4a69bd;
+  border-color: #4a69bd;
+}
+
+/* Quitar altura extra que mete Ant */
+.modern-steps :deep(.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item) {
+  margin-top: 0;
+}
+
+
+</style>
diff --git a/front/src/components/WebPageSections/ProgramasSection.vue b/front/src/components/WebPageSections/ProgramasSection.vue
new file mode 100644
index 0000000..f41757b
--- /dev/null
+++ b/front/src/components/WebPageSections/ProgramasSection.vue
@@ -0,0 +1,161 @@
+<!-- components/programas/ProgramasSection.vue -->
+<template>
+  <section class="programas-section">
+    <div class="section-container">
+      <div class="section-header">
+        <h2 class="section-title">Programas Académicos</h2>
+        <p class="section-subtitle">Explora nuestra oferta académica de pregrado y posgrado</p>
+      </div>
+
+      <div class="facultades-tabs">
+        <a-tabs v-model:activeKey="facultadActiva">
+          <a-tab-pane v-for="facultad in facultades" :key="facultad.id" :tab="facultad.nombre">
+            <div class="carreras-grid">
+              <a-card v-for="carrera in facultad.carreras" :key="carrera.id" class="carrera-card">
+                <div class="carrera-header">
+                  <div class="carrera-icon">
+                    <component :is="carrera.icono" />
+                  </div>
+                  <div>
+                    <h4>{{ carrera.nombre }}</h4>
+                    <p class="carrera-grado">{{ carrera.grado }}</p>
+                  </div>
+                </div>
+                <p class="carrera-desc">{{ carrera.descripcion }}</p>
+                <div class="carrera-stats">
+                  <span><UserOutlined /> Vacantes: {{ carrera.vacantes }}</span>
+                  <span><TrophyOutlined /> Puntaje: {{ carrera.puntaje }}</span>
+                </div>
+                <a-button type="link" size="small" class="carrera-link">Ver plan de estudios</a-button>
+              </a-card>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { UserOutlined, TrophyOutlined } from '@ant-design/icons-vue'
+
+defineProps({
+  facultades: {
+    type: Array,
+    required: true
+  }
+})
+
+const facultadActiva = ref('1')
+</script>
+
+<style scoped>
+.programas-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.section-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1a237e;
+  margin-bottom: 16px;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: #666;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.facultades-tabs :deep(.ant-tabs-nav) {
+  margin-bottom: 40px;
+}
+
+.carreras-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.carrera-card {
+  border: none;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  transition: transform 0.3s ease;
+}
+
+.carrera-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+.carrera-header {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.carrera-icon {
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  color: white;
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+
+.carrera-header h4 {
+  margin: 0;
+  color: #1a237e;
+}
+
+.carrera-grado {
+  color: #666;
+  font-size: 0.875rem;
+  margin: 4px 0 0;
+}
+
+.carrera-desc {
+  color: #666;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.carrera-stats {
+  display: flex;
+  justify-content: space-between;
+  color: #666;
+  font-size: 0.875rem;
+  margin-bottom: 16px;
+}
+
+.carrera-link {
+  color: #1890ff;
+  font-weight: 500;
+}
+
+@media (max-width: 992px) {
+  .section-title {
+    font-size: 2rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/WebPageSections/StatsSection.vue b/front/src/components/WebPageSections/StatsSection.vue
new file mode 100644
index 0000000..ad0368e
--- /dev/null
+++ b/front/src/components/WebPageSections/StatsSection.vue
@@ -0,0 +1,63 @@
+
+<!-- components/stats/StatsSection.vue -->
+<template>
+  <section class="stats-section">
+    <div class="section-container">
+      <div class="stats-grid">
+        <div class="stat-card">
+          <h3>25+</h3>
+          <p>Carreras Profesionales</p>
+        </div>
+        <div class="stat-card">
+          <h3>98%</h3>
+          <p>Indice de Satisfacción</p>
+        </div>
+        <div class="stat-card">
+          <h3>15,000+</h3>
+          <p>Estudiantes Activos</p>
+        </div>
+        <div class="stat-card">
+          <h3>85%</h3>
+          <p>Egresados Laborando</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.stats-section {
+  padding: 60px 0;
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  color: white;
+}
+
+.section-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 40px;
+  text-align: center;
+}
+
+.stat-card h3 {
+  font-size: 3rem;
+  font-weight: 800;
+  margin: 0;
+  background: linear-gradient(45deg, #ffd700, #ff6b6b);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.stat-card p {
+  font-size: 1rem;
+  opacity: 0.9;
+  margin: 8px 0 0;
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/WebPageSections/modal/PreinscripcionModal.vue b/front/src/components/WebPageSections/modal/PreinscripcionModal.vue
new file mode 100644
index 0000000..61d3d29
--- /dev/null
+++ b/front/src/components/WebPageSections/modal/PreinscripcionModal.vue
@@ -0,0 +1,118 @@
+<!-- components/modals/PreinscripcionModal.vue -->
+<template>
+<a-modal 
+  :open="visible"
+  @update:open="$emit('update:visible', $event)"
+  title="Preinscripción en Línea" 
+  width="600px"
+  :footer="null"
+  class="modern-modal"
+>
+
+    <div class="modal-steps">
+      <a-steps :current="0" size="small">
+        <a-step title="Datos Personales" />
+        <a-step title="Programa" />
+        <a-step title="Documentos" />
+        <a-step title="Confirmación" />
+      </a-steps>
+    </div>
+    
+    <a-form layout="vertical" class="modal-form">
+      <h3>Información Personal</h3>
+      
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="Nombres">
+            <a-input placeholder="Ingresa tus nombres" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="Apellidos">
+            <a-input placeholder="Ingresa tus apellidos" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      
+      <a-form-item label="Correo Electrónico">
+        <a-input type="email" placeholder="ejemplo@correo.com" />
+      </a-form-item>
+      
+      <a-form-item label="Programa de Interés">
+        <a-select placeholder="Selecciona un programa">
+          <a-select-option v-for="facultad in facultades" :key="facultad.id">
+            <optgroup :label="facultad.nombre">
+              <a-select-option v-for="carrera in facultad.carreras" :key="carrera.id" :value="carrera.id">
+                {{ carrera.nombre }}
+              </a-select-option>
+            </optgroup>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      
+      <a-form-item>
+        <a-checkbox>
+          Acepto los términos y condiciones del proceso de admisión
+        </a-checkbox>
+      </a-form-item>
+      
+      <div class="modal-actions">
+        <a-button @click="$emit('update:visible', false)">Cancelar</a-button>
+        <a-button type="primary" @click="$emit('submit')">Continuar</a-button>
+      </div>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+defineProps({
+  visible: {
+    type: Boolean,
+    required: true
+  },
+  facultades: {
+    type: Array,
+    required: true
+  }
+})
+
+defineEmits(['update:visible', 'submit'])
+</script>
+
+<style scoped>
+.modern-modal :deep(.ant-modal-content) {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.modern-modal :deep(.ant-modal-header) {
+  border-bottom: none;
+  padding: 32px 32px 0;
+}
+
+.modern-modal :deep(.ant-modal-body) {
+  padding: 32px;
+}
+
+.modern-modal :deep(.ant-modal-title) {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1a237e;
+}
+
+.modal-steps {
+  margin-bottom: 32px;
+}
+
+.modal-form h3 {
+  margin: 0 0 24px;
+  color: #1a237e;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 32px;
+}
+</style>
\ No newline at end of file
diff --git a/front/src/views/postulante/LoginView.vue b/front/src/views/postulante/LoginView.vue
index db67d33..3b6845e 100644
--- a/front/src/views/postulante/LoginView.vue
+++ b/front/src/views/postulante/LoginView.vue
@@ -1,1284 +1,316 @@
-<!-- views/LoginView.vue -->
 <template>
-  <div class="login-page">
-    <!-- Encabezado con logo UNA -->
-    <header class="login-header">
-      <div class="header-container">
-        <div class="una-logo">
-          <div class="logo-wrapper">
-            <img src="/logotiny.png" alt="Logo UNA" class="logo-img" />
-          </div>
-          <div class="una-titles">
-            <h1 class="una-main-title">Universidad Nacional del Altiplano</h1>
-            <h2 class="una-subtitle">Portal del Postulante</h2>
-          </div>
-        </div>
-        <div class="header-contact">
-          <div class="contact-item">
-            <span class="contact-label">Admisión:</span>
-            <span class="contact-value">(051) 123-4567</span>
-          </div>
-          <div class="contact-item">
-            <span class="contact-label">Email:</span>
-            <span class="contact-value">admision@una.edu.pe</span>
-          </div>
-        </div>
-      </div>
-    </header>
-
-    <!-- Contenido principal -->
-    <main class="login-main">
-      <div class="login-container">
-        <!-- Card de Login/Registro -->
-        <div class="auth-card">
-          <!-- Logo más pequeño dentro del card -->
-          <div class="card-logo">
-            <div class="logo-icon-small">
-              <img src="/logotiny.png" alt="Logo UNA" />
-            </div>
-            <div class="card-logo-text">
-              <h2>Acceso al Sistema</h2>
-              <span>Ingresa o crea tu cuenta para continuar</span>
-            </div>
-          </div>
-
-          <!-- Tabs para Login/Registro -->
-          <a-tabs v-model:activeKey="activeTab" centered class="auth-tabs">
-            <a-tab-pane key="login" tab="Iniciar Sesión">
-              <div class="form-section">
-                <div class="form-header">
-                  <h3>Acceder a mi cuenta</h3>
-                  <p>Ingresa tus credenciales para continuar</p>
-                </div>
-
-                <a-form
-                  :model="loginForm"
-                  :rules="loginRules"
-                  layout="vertical"
-                  @finish="handleLogin"
-                  class="auth-form"
-                  ref="loginFormRef"
-                >
-                  <a-form-item label="Correo Electrónico" name="email">
-                    <a-input
-                      v-model:value="loginForm.email"
-                      placeholder="ejemplo@correo.com"
-                      size="large"
-                      :disabled="authStore.loading"
-                      autocomplete="username"
-                    >
-                      <template #prefix>
-                        <MailOutlined />
-                      </template>
-                    </a-input>
-                  </a-form-item>
-
-                  <a-form-item label="Contraseña" name="password">
-                    <a-input-password
-                      v-model:value="loginForm.password"
-                      placeholder="Tu contraseña"
-                      size="large"
-                      :disabled="authStore.loading"
-                      autocomplete="current-password"
-                    >
-                      <template #prefix>
-                        <LockOutlined />
-                      </template>
-                    </a-input-password>
-                  </a-form-item>
-
-                  <!-- Opciones adicionales login -->
-                  <div class="form-options">
-                    <a-checkbox v-model:checked="rememberMe">
-                      Recordar sesión
-                    </a-checkbox>
-                    <a-button type="link" @click="showForgotPassword">
-                      ¿Olvidaste tu contraseña?
-                    </a-button>
-                  </div>
-
-                  <!-- Mensaje de error -->
-                  <div v-if="authStore.error && activeTab === 'login'" class="error-message">
-                    <AlertOutlined />
-                    <span>{{ authStore.error }}</span>
-                  </div>
-
-                  <!-- Botón de submit -->
-                  <a-form-item>
-                    <a-button
-                      type="primary"
-                      html-type="submit"
-                      size="large"
-                      :loading="authStore.loading && activeTab === 'login'"
-                      block
-                      class="submit-btn"
-                    >
-                      <template v-if="!authStore.loading || activeTab !== 'login'">
-                        <LoginOutlined />
-                        Iniciar Sesión
-                      </template>
-                      <span v-else>Verificando...</span>
-                    </a-button>
-                  </a-form-item>
-
-                  <!-- Enlace para registrarse -->
-                  <div class="switch-auth">
-                    <span>¿No tienes una cuenta? </span>
-                    <a-button type="link" @click="activeTab = 'register'">
-                      Regístrate aquí
-                    </a-button>
-                  </div>
-                </a-form>
+  <div class="auth-wrapper">
+    <a-row justify="center" align="middle" class="full-height">
+      <a-col :xs="22" :sm="20" :md="20" :lg="16" :xl="14">
+        
+        <a-row :gutter="24">
+          
+          <!-- CARD FORMULARIO -->
+          <a-col :xs="24" :md="12">
+            <a-card class="auth-card" :bordered="false">
+              
+              <!-- Header -->
+              <div class="auth-header">
+                <a-typography-title :level="3" style="margin-bottom: 8px">
+                  {{ isRegister ? 'Crear Cuenta' : 'Iniciar Sesión' }}
+                </a-typography-title>
+
+                <a-typography-text type="secondary">
+                  {{ isRegister 
+                    ? 'Complete el formulario para registrarse'
+                    : 'Ingrese sus credenciales para continuar'
+                  }}
+                </a-typography-text>
               </div>
-            </a-tab-pane>
 
-            <a-tab-pane key="register" tab="Registrarse">
-              <div class="form-section">
-                <div class="form-header">
-                  <h3>Crear nueva cuenta</h3>
-                  <p>Completa el formulario para registrarte</p>
-                </div>
-
-                <a-form
-                  :model="registerForm"
-                  :rules="registerRules"
-                  layout="vertical"
-                  @finish="handleRegister"
-                  class="auth-form"
-                  ref="registerFormRef"
+              <a-divider />
+
+              <!-- Formulario -->
+              <a-form
+                ref="formRef"
+                :model="formState"
+                :rules="rules"
+                @finish="handleSubmit"
+                layout="vertical"
+              >
+
+                <!-- DNI -->
+                <a-form-item v-if="isRegister" label="DNI" name="dni">
+                  <a-input v-model:value="formState.dni" size="large">
+                    <template #prefix><IdcardOutlined /></template>
+                  </a-input>
+                </a-form-item>
+
+                <!-- Nombre -->
+                <a-form-item v-if="isRegister" label="Nombre completo" name="name">
+                  <a-input v-model:value="formState.name" size="large">
+                    <template #prefix><UserOutlined /></template>
+                  </a-input>
+                </a-form-item>
+
+                <!-- Email -->
+                <a-form-item label="Correo electrónico" name="email">
+                  <a-input v-model:value="formState.email" size="large">
+                    <template #prefix><MailOutlined /></template>
+                  </a-input>
+                </a-form-item>
+
+                <!-- Password -->
+                <a-form-item label="Contraseña" name="password">
+                  <a-input-password v-model:value="formState.password" size="large">
+                    <template #prefix><LockOutlined /></template>
+                  </a-input-password>
+                </a-form-item>
+
+                <!-- Confirm Password -->
+                <a-form-item
+                  v-if="isRegister"
+                  label="Confirmar contraseña"
+                  name="password_confirmation"
                 >
-                  <a-row :gutter="16">
-                    <a-col :xs="24" :sm="24" :md="12">
-                      <a-form-item label="Nombres" name="name">
-                        <a-input
-                          v-model:value="registerForm.name"
-                          placeholder="Tus nombres completos"
-                          size="large"
-                          :disabled="authStore.loading"
-                          autocomplete="username"
-                        >
-                          <template #prefix>
-                            <UserOutlined />
-                          </template>
-                        </a-input>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :xs="24" :sm="24" :md="12">
-                      <a-form-item label="DNI" name="dni">
-                        <a-input
-                          v-model:value="registerForm.dni"
-                          placeholder="87654321"
-                          size="large"
-                          :maxlength="8"
-                          :disabled="authStore.loading"
-                        >
-                          <template #prefix>
-                            <IdcardOutlined />
-                          </template>
-                        </a-input>
-                      </a-form-item>
-                    </a-col>
-                  </a-row>
-
-                  <a-form-item label="Correo Electrónico" name="email">
-                    <a-input
-                      v-model:value="registerForm.email"
-                      placeholder="ejemplo@correo.com"
-                      size="large"
-                      :disabled="authStore.loading"
-                      autocomplete="email"
-                    >
-                      <template #prefix>
-                        <MailOutlined />
-                      </template>
-                    </a-input>
-                  </a-form-item>
-
-                  <a-row :gutter="16">
-                    <a-col :xs="24" :sm="24" :md="12">
-                      <a-form-item label="Contraseña" name="password">
-                        <a-input-password
-                          v-model:value="registerForm.password"
-                          placeholder="Mínimo 6 caracteres"
-                          size="large"
-                          :disabled="authStore.loading"
-                          autocomplete="new-password"
-                        >
-                          <template #prefix>
-                            <LockOutlined />
-                          </template>
-                        </a-input-password>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :xs="24" :sm="24" :md="12">
-                      <a-form-item label="Confirmar Contraseña" name="password_confirmation">
-                        <a-input-password
-                          v-model:value="registerForm.password_confirmation"
-                          placeholder="Repite tu contraseña"
-                          size="large"
-                          :disabled="authStore.loading"
-                          autocomplete="new-password"
-                        >
-                          <template #prefix>
-                            <SafetyOutlined />
-                          </template>
-                        </a-input-password>
-                      </a-form-item>
-                    </a-col>
-                  </a-row>
+                  <a-input-password
+                    v-model:value="formState.password_confirmation"
+                    size="large"
+                  >
+                    <template #prefix><LockOutlined /></template>
+                  </a-input-password>
+                </a-form-item>
+
+                <!-- Recordarme -->
+                <a-row v-if="!isRegister" justify="space-between" align="middle">
+                  <a-checkbox v-model:checked="rememberMe">
+                    Recordarme
+                  </a-checkbox>
+
+                  <a-button type="link" size="small" @click="handleForgotPassword">
+                    ¿Olvidó su contraseña?
+                  </a-button>
+                </a-row>
+
+                <a-form-item style="margin-top: 24px">
+                  <a-button
+                    type="primary"
+                    html-type="submit"
+                    block
+                    size="large"
+                    :loading="loading"
+                  >
+                    {{ isRegister ? 'Registrarse' : 'Iniciar Sesión' }}
+                  </a-button>
+                </a-form-item>
+              </a-form>
+
+              <a-divider />
+
+              <!-- Toggle -->
+              <div style="text-align:center">
+                <a-typography-text type="secondary">
+                  {{ isRegister 
+                    ? '¿Ya tiene una cuenta?' 
+                    : '¿No tiene una cuenta?' 
+                  }}
+                </a-typography-text>
+
+                <br />
+
+                <a-button type="link" @click="toggleMode">
+                  {{ isRegister ? 'Iniciar sesión' : 'Registrarse' }}
+                </a-button>
+              </div>
 
-                  <!-- Términos y condiciones -->
-                  <a-form-item name="terms">
-                    <a-checkbox v-model:checked="registerForm.terms">
-                      Acepto los 
-                      <a href="#" @click.prevent="showTermsModal">términos y condiciones</a> 
-                      y la 
-                      <a href="#" @click.prevent="showPrivacyModal">política de privacidad</a>
-                    </a-checkbox>
-                  </a-form-item>
+            </a-card>
+          </a-col>
+
+          <!-- CARD DERECHO (MISMO DISEÑO) -->
+          <a-col :xs="24" :md="12">
+            <a-card class="auth-card" :bordered="false">
+              
+              <div class="auth-header">
+                <a-typography-title :level="3" style="margin-bottom: 8px">
+                  Información
+                </a-typography-title>
+
+                <a-typography-text type="secondary">
+                  Plataforma de postulantes
+                </a-typography-text>
+              </div>
 
-                  <!-- Mensaje de error -->
-                  <div v-if="authStore.error && activeTab === 'register'" class="error-message">
-                    <AlertOutlined />
-                    <span>{{ authStore.error }}</span>
-                  </div>
+              <a-divider />
 
-                  <!-- Botón de submit -->
-                  <a-form-item>
-                    <a-button
-                      type="primary"
-                      html-type="submit"
-                      size="large"
-                      :loading="authStore.loading && activeTab === 'register'"
-                      block
-                      class="submit-btn"
-                    >
-                      <template v-if="!authStore.loading || activeTab !== 'register'">
-                        <UserAddOutlined />
-                        Crear Cuenta
-                      </template>
-                      <span v-else>Registrando...</span>
-                    </a-button>
-                  </a-form-item>
+              <a-typography-paragraph>
+                • Accede a tu examen virtual.
+              </a-typography-paragraph>
 
-                  <!-- Enlace para iniciar sesión -->
-                  <div class="switch-auth">
-                    <span>¿Ya tienes una cuenta? </span>
-                    <a-button type="link" @click="activeTab = 'login'">
-                      Inicia sesión aquí
-                    </a-button>
-                  </div>
-                </a-form>
-              </div>
-            </a-tab-pane>
-          </a-tabs>
+              <a-typography-paragraph>
+                • Consulta tus resultados.
+              </a-typography-paragraph>
 
-          <!-- Enlace de ayuda -->
-          <div class="help-section">
-            <a-divider>¿Necesitas ayuda?</a-divider>
-            <p class="help-text">
-              Si tienes problemas para acceder, comunícate con la
-              Dirección de Admisión al 
-              <a href="tel:0511234567">(051) 123-4567</a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </main>
+              <a-typography-paragraph>
+                • Revisa tu estado de admisión.
+              </a-typography-paragraph>
 
-    <!-- Footer minimalista -->
-    <footer class="login-footer">
-      <div class="footer-container">
-        <p>© 2024 Universidad Nacional del Altiplano - Dirección de Admisión</p>
-        <div class="footer-links">
-          <a href="#" @click.prevent="showTermsModal">Términos y Condiciones</a>
-          <a href="#" @click.prevent="showPrivacyModal">Política de Privacidad</a>
-          <a href="#" @click.prevent="showHelpModal">Ayuda</a>
-        </div>
-      </div>
-    </footer>
+              <a-typography-paragraph>
+                • Actualiza tu información personal.
+              </a-typography-paragraph>
 
-    <!-- Modales -->
-    <a-modal
-      v-model:visible="termsModalVisible"
-      title="Términos y Condiciones"
-      :width="modalWidth"
-      :footer="null"
-    >
-      <div class="modal-content">
-        <h3>Términos y Condiciones del Portal del Postulante</h3>
-        <p>1. El postulante se compromete a proporcionar información veraz y actualizada.</p>
-        <p>2. La Universidad se reserva el derecho de verificar la autenticidad de los documentos.</p>
-        <p>3. El acceso al portal es personal e intransferible.</p>
-        <p>4. El postulante es responsable de mantener la confidencialidad de sus credenciales.</p>
-      </div>
-    </a-modal>
+            </a-card>
+          </a-col>
 
-    <a-modal
-      v-model:visible="privacyModalVisible"
-      title="Política de Privacidad"
-      :width="modalWidth"
-      :footer="null"
-    >
-      <div class="modal-content">
-        <h3>Política de Privacidad</h3>
-        <p>1. Protegemos tus datos personales conforme a la Ley de Protección de Datos Personales.</p>
-        <p>2. Tu información será utilizada exclusivamente para fines de admisión.</p>
-        <p>3. No compartiremos tu información con terceros sin tu consentimiento.</p>
-        <p>4. Puedes solicitar la eliminación de tus datos según la normativa vigente.</p>
-      </div>
-    </a-modal>
+        </a-row>
 
-    <a-modal
-      v-model:visible="forgotPasswordModalVisible"
-      title="Recuperar Contraseña"
-      :width="modalWidth"
-      :footer="null"
-    >
-      <div class="modal-content">
-        <p>Ingresa tu correo electrónico para recibir un enlace de recuperación:</p>
-        <a-form
-          :model="forgotPasswordForm"
-          :rules="forgotPasswordRules"
-          layout="vertical"
-          @finish="handleForgotPassword"
-        >
-          <a-form-item label="Correo Electrónico" name="email">
-            <a-input
-              v-model:value="forgotPasswordForm.email"
-              placeholder="ejemplo@correo.com"
-              size="large"
-            >
-              <template #prefix>
-                <MailOutlined />
-              </template>
-            </a-input>
-          </a-form-item>
-          <a-button type="primary" html-type="submit" block :loading="sendingResetLink">
-            <template v-if="!sendingResetLink">
-              Enviar enlace de recuperación
-            </template>
-            <span v-else>Enviando...</span>
-          </a-button>
-        </a-form>
-      </div>
-    </a-modal>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed, nextTick } from 'vue'
+import { ref, reactive, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../../store/postulanteStore'
-import { 
-  UserOutlined,
-  MailOutlined,
-  LockOutlined,
-  LoginOutlined,
-  UserAddOutlined,
-  SafetyOutlined,
-  IdcardOutlined,
-  AlertOutlined
-} from '@ant-design/icons-vue'
-import { message } from 'ant-design-vue'
+import { UserOutlined, MailOutlined, LockOutlined, IdcardOutlined } from '@ant-design/icons-vue'
+import { notification } from 'ant-design-vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
+const formRef = ref()
 
-// Refs
-const activeTab = ref('login')
-const loginFormRef = ref()
-const registerFormRef = ref()
+const isRegister = ref(false)
 const rememberMe = ref(false)
-const termsModalVisible = ref(false)
-const privacyModalVisible = ref(false)
-const forgotPasswordModalVisible = ref(false)
-const sendingResetLink = ref(false)
+const loading = ref(false)
 
-// Computed para ancho de modal responsivo
-const modalWidth = computed(() => {
-  const width = window.innerWidth
-  if (width < 640) return '90%'
-  if (width < 768) return '85%'
-  if (width < 992) return '80%'
-  return '600px'
-})
-
-// Estados de formularios
-const loginForm = reactive({
-  email: '',
-  password: ''
-})
-
-const registerForm = reactive({
+const formState = reactive({
   name: '',
   email: '',
-  dni: '',
   password: '',
   password_confirmation: '',
-  terms: false
+  dni: ''
 })
 
-const forgotPasswordForm = reactive({
-  email: ''
+notification.config({
+  placement: 'top',
+  duration: 3,
+  maxCount: 3,
 })
 
-// Reglas de validación
-const loginRules = {
-  email: [
-    { required: true, message: 'Por favor ingresa tu correo', trigger: 'blur' },
-    { type: 'email', message: 'Correo electrónico inválido', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: 'Por favor ingresa tu contraseña', trigger: 'blur' },
-    { min: 6, message: 'La contraseña debe tener al menos 6 caracteres', trigger: 'blur' }
-  ]
-}
+watch(isRegister, () => {
+  formRef.value?.clearValidate()
+})
 
-const registerRules = {
+const rules = computed(() => ({
+  dni: [
+    { required: isRegister.value, message: 'Ingrese su DNI', trigger: 'blur' },
+    { pattern: /^\d{8}$/, message: 'El DNI debe tener 8 dígitos', trigger: 'blur' }
+  ],
   name: [
-    { required: true, message: 'Por favor ingresa tus nombres', trigger: 'blur' },
+    { required: isRegister.value, message: 'Ingrese su nombre completo', trigger: 'blur' },
     { min: 3, message: 'El nombre debe tener al menos 3 caracteres', trigger: 'blur' }
   ],
   email: [
-    { required: true, message: 'Por favor ingresa tu correo', trigger: 'blur' },
-    { type: 'email', message: 'Correo electrónico inválido', trigger: 'blur' }
-  ],
-  dni: [
-    { required: true, message: 'Por favor ingresa tu DNI', trigger: 'blur' },
-    { pattern: /^\d{8}$/, message: 'El DNI debe tener 8 dígitos', trigger: 'blur' }
+    { required: true, message: 'Ingrese su correo electrónico', trigger: 'blur' },
+    { type: 'email', message: 'Ingrese un correo electrónico válido', trigger: 'blur' }
   ],
   password: [
-    { required: true, message: 'Por favor crea una contraseña', trigger: 'blur' },
+    { required: true, message: 'Ingrese su contraseña', trigger: 'blur' },
     { min: 6, message: 'La contraseña debe tener al menos 6 caracteres', trigger: 'blur' }
   ],
-password_confirmation: [
-  {
-    required: true,
-    message: 'Por favor confirma tu contraseña',
-    trigger: 'blur'
-  },
-  {
-    async validator(_, value) {
-      if (!value) return
-      if (value !== registerForm.password) {
-        throw new Error('Las contraseñas no coinciden')
-      }
-    },
-    trigger: 'blur'
-  }
-]
-,
-terms: [
-  {
-    async validator(_, value) {
-      if (!value) {
-        throw new Error('Debes aceptar los términos y condiciones')
-      }
-    },
-    trigger: 'change'
-  }
-]
+  password_confirmation: [
+    { required: isRegister.value, message: 'Confirme su contraseña', trigger: 'blur' },
+    {
+      validator: (rule, value) => {
+        if (!isRegister.value) return Promise.resolve()
+        if (!value) return Promise.reject('Confirme su contraseña')
+        if (value !== formState.password) return Promise.reject('Las contraseñas no coinciden')
+        return Promise.resolve()
+      },
+      trigger: 'blur'
+    }
+  ]
+}))
 
+const showNotification = (type, message, description = '') => {
+  notification[type]({ message, description, duration: 3 })
 }
 
-const forgotPasswordRules = {
-  email: [
-    { required: true, message: 'Por favor ingresa tu correo', trigger: 'blur' },
-    { type: 'email', message: 'Correo electrónico inválido', trigger: 'blur' }
-  ]
+const toggleMode = () => {
+  isRegister.value = !isRegister.value
+  Object.keys(formState).forEach(key => formState[key] = '')
+  formRef.value?.clearValidate()
 }
 
-// Manejar login
-const handleLogin = async (values) => {
-  const deviceId = rememberMe.value ? generateDeviceId() : null
-  
-  const result = await authStore.login({
-    email: values.email,
-    password: values.password,
-    device_id: deviceId
-  })
-  
-  if (result.success) {
-    // Redirigir al portal
-    router.push('/portal-postulante')
-  }
+const handleForgotPassword = () => {
+  showNotification('info', 'Recuperación de contraseña', 'Por favor, contacte al administrador del sistema')
 }
 
-// Manejar registro - MODIFICADO: Ahora cambia a login después del registro
-const handleRegister = async (values) => {
+const handleSubmit = async () => {
+  loading.value = true
   try {
-    const result = await authStore.register({
-      name: values.name,
-      email: values.email,
-      dni: values.dni,
-      password: values.password,
-      password_confirmation: values.password_confirmation
-    })
-    
-    if (result.success) {
-      // Mostrar mensaje de éxito
-      message.success({
-        content: '¡Registro exitoso! Ahora puedes iniciar sesión con tus credenciales.',
-        duration: 5,
+    if (isRegister.value) {
+      const result = await authStore.register({ ...formState })
+      if (result.success) {
+        showNotification('success', '¡Registro exitoso!', 'Tu cuenta ha sido creada correctamente')
+        toggleMode()
+      } else {
+        showNotification('error', 'Error en registro', result.error)
+      }
+    } else {
+      const result = await authStore.login({
+        email: formState.email,
+        password: formState.password,
+        device_id: rememberMe.value ? localStorage.getItem('device_id') : null
       })
-      
-      // Guardar el email del registro para facilitar el login
-      loginForm.email = values.email
-      loginForm.password = '' // Limpiar la contraseña por seguridad
-      
-      // Cambiar a la pestaña de login
-      activeTab.value = 'login'
-      
-      // Limpiar el formulario de registro después de un breve delay
-      setTimeout(() => {
-        registerForm.name = ''
-        registerForm.email = ''
-        registerForm.dni = ''
-        registerForm.password = ''
-        registerForm.password_confirmation = ''
-        registerForm.terms = false
-        
-        // Resetear errores de validación
-        if (registerFormRef.value) {
-          registerFormRef.value.clearValidate()
-        }
-      }, 500)
-      
-      return
-    }
-    
-    // Si hay error en el registro, mostrar mensaje
-    if (result.error) {
-      message.error(result.error)
-    }
-    
-  } catch (error) {
-    console.error('Error en registro:', error)
-    message.error('Error en el proceso de registro. Por favor, inténtalo nuevamente.')
-  }
-}
-
-// Funciones auxiliares
-const generateDeviceId = () => {
-  return 'device_' + Math.random().toString(36).substr(2, 9)
-}
-
-const showForgotPassword = () => {
-  forgotPasswordModalVisible.value = true
-}
 
-const handleForgotPassword = async (values) => {
-  sendingResetLink.value = true
-  try {
-    // Aquí implementarías la llamada a la API para recuperar contraseña
-    // await api.post('/postulante/forgot-password', { email: values.email })
-    
-    // Simulando envío
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    
-    message.success('Se ha enviado un enlace de recuperación a tu correo electrónico')
-    forgotPasswordModalVisible.value = false
-    forgotPasswordForm.email = ''
+      if (result.success) {
+        showNotification('success', '¡Bienvenido!', `Hola ${authStore.userName || ''}`)
+        router.push('/dashboard')
+      } else {
+        showNotification('error', 'Error en login', result.error)
+      }
+    }
   } catch (error) {
-    console.error('Error enviando enlace de recuperación:', error)
-    message.error('Error al enviar el enlace de recuperación')
+    showNotification('error', 'Error', error.response?.data?.message || 'Ocurrió un error inesperado')
   } finally {
-    sendingResetLink.value = false
+    loading.value = false
   }
 }
 
-const showTermsModal = () => {
-  termsModalVisible.value = true
-}
-
-const showPrivacyModal = () => {
-  privacyModalVisible.value = true
-}
-
-const showHelpModal = () => {
-  alert('Para ayuda, contacta a la Dirección de Admisión al (051) 123-4567 o escribe a admision@una.edu.pe')
+const checkExistingAuth = async () => {
+  if (authStore.isAuthenticated) {
+    const isValid = await authStore.checkAuth()
+    if (isValid) router.push('/dashboard-postulante')
+  }
 }
 
-// Si ya está autenticado, redirigir al portal
-onMounted(async () => {
-  const isAuthenticated = await authStore.checkAuth()
-  if (isAuthenticated) {
-    router.push('/portal')
-  }
-})
+checkExistingAuth()
 </script>
 
 <style scoped>
-/* Variables */
-:root {
-  --primary-color: #1890ff;
-  --secondary-color: #4a5568;
-  --accent-color: #4299e1;
-  --light-gray: #f7fafc;
-  --medium-gray: #e2e8f0;
-  --dark-gray: #2d3748;
-  --white: #ffffff;
-  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
-  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
-  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.12);
-  --font-family: "Times New Roman", Times, serif;
-  --una-blue: #1a365d;
-  --una-gold: #d4af37;
-}
-
-/* Estructura de la página */
-.login-page {
+.auth-wrapper {
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--font-family);
-  background: #f8f9fa;
-}
-
-/* =========================================== */
-/* ENCABEZADO CON LOGO UNA */
-/* =========================================== */
-.login-header {
-  background: var(--una-blue);
-  color: white;
-  padding: 12px 0;
-  box-shadow: var(--shadow-heavy);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
-
-.header-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.una-logo {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.logo-wrapper {
-  width: 50px;
-  height: 50px;
-  border-radius: 8px;
-  background: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  box-shadow: var(--shadow-medium);
-}
-
-.logo-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.una-titles {
-  display: flex;
-  flex-direction: column;
-}
-
-.una-main-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: white;
-  line-height: 1.2;
-}
-
-.una-subtitle {
-  margin: 4px 0 0;
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--una-gold);
-  letter-spacing: 0.5px;
-}
-
-.header-contact {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  text-align: right;
-}
-
-.contact-item {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 0.875rem;
-}
-
-.contact-label {
-  font-weight: 600;
-  color: var(--una-gold);
-}
-
-.contact-value {
-  color: white;
-}
-
-/* Contenido principal - CENTRADO */
-.login-main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 30px 20px;
-  width: 100%;
+  background: linear-gradient(135deg, #1890ff, #722ed1);
 }
 
-.login-container {
-  max-width: 500px; /* Ancho fijo para centrar */
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.full-height {
+  min-height: 100vh;
 }
 
-/* Card de autenticación */
 .auth-card {
-  background: rgb(255, 255, 255);
-  border-radius: 12px;
-  padding: 40px;
-  box-shadow: var(--shadow-heavy);
-  border: 1px solid var(--medium-gray);
-  width: 100%;
-  margin-top: 20px;
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
 }
 
-.card-logo {
+.auth-header {
   text-align: center;
-  margin-bottom: 30px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--medium-gray);
-}
-
-.logo-icon-small {
-  width: 60px;
-  height: 60px;
-  border-radius: 10px;
-  background: var(--white);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 15px;
-  border: 2px solid var(--primary-color);
-  padding: 5px;
-}
-
-.logo-icon-small img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.card-logo-text h2 {
-  margin: 0 0 8px;
-  color: var(--primary-color);
-  font-size: 1.35rem;
-  font-weight: 700;
-}
-
-.card-logo-text span {
-  color: var(--secondary-color);
-  font-size: 0.875rem;
-}
-
-/* Tabs de autenticación */
-.auth-tabs :deep(.ant-tabs-nav) {
-  margin-bottom: 30px;
-}
-
-.auth-tabs :deep(.ant-tabs-tab) {
-  font-size: 1rem;
-  font-weight: 500;
-  padding: 12px 24px;
-}
-
-.auth-tabs :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
-  color: var(--primary-color);
-  font-weight: 600;
-}
-
-.auth-tabs :deep(.ant-tabs-ink-bar) {
-  background: var(--primary-color);
+  margin-bottom: 16px;
 }
 
-/* Formularios */
-.form-section {
-  background: var(--white);
-  margin-top: 6px;
+:deep(.ant-input-affix-wrapper),
+:deep(.ant-input-password) {
   border-radius: 8px;
-  padding: 0;
-}
-
-.form-header {
-  text-align: center;
-  margin-bottom: 24px;
-}
-
-.form-header h3 {
-  margin: 0 0 8px;
-  color: var(--primary-color);
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.form-header p {
-  margin: 0;
-  color: var(--secondary-color);
-  font-size: 0.875rem;
-}
-
-.auth-form :deep(.ant-form-item-label) {
-  font-weight: 600;
-  color: var(--secondary-color);
-  font-size: 0.875rem;
 }
 
-.auth-form :deep(.ant-input),
-.auth-form :deep(.ant-input-password) {
-  border-radius: 6px;
-  border: 1px solid var(--medium-gray);
-  transition: all 0.3s;
-  font-family: var(--font-family);
-}
-
-.auth-form :deep(.ant-input:hover),
-.auth-form :deep(.ant-input-password:hover) {
-  border-color: var(--primary-color);
-}
-
-.auth-form :deep(.ant-input:focus),
-.auth-form :deep(.ant-input-password:focus) {
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
-}
-
-/* Opciones del formulario */
-.form-options {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 20px;
-  font-size: 0.875rem;
-}
-
-.form-options :deep(.ant-checkbox-wrapper) {
-  color: var(--secondary-color);
-}
-
-.form-options :deep(.ant-btn-link) {
-  padding: 0;
-  height: auto;
-  color: var(--primary-color);
-  text-align: left;
-}
-
-.form-options :deep(.ant-btn-link:hover) {
-  color: #096dd9;
-}
-
-/* Switch entre login y registro */
-.switch-auth {
-  text-align: center;
-  margin-top: 20px;
-  color: var(--secondary-color);
-  font-size: 0.875rem;
-}
-
-.switch-auth :deep(.ant-btn-link) {
-  padding: 0;
-  height: auto;
-  color: var(--primary-color);
-  font-weight: 500;
-}
-
-.switch-auth :deep(.ant-btn-link:hover) {
-  color: #096dd9;
-}
-
-/* Mensajes de error */
-.error-message {
-  background: #fff2f0;
-  border: 1px solid #ffccc7;
-  border-radius: 6px;
-  padding: 12px 16px;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #cf1322;
-  font-size: 0.875rem;
-}
-
-.error-message svg {
-  font-size: 16px;
-}
-
-/* BOTÓN DE SUBMIT - AZUL SÓLIDO */
-.submit-btn {
+:deep(.ant-btn-primary) {
+  border-radius: 8px;
   height: 48px;
   font-weight: 600;
-  background: var(--primary-color); /* Azul sólido */
-  border: none;
-  border-radius: 8px;
-  box-shadow: var(--shadow-medium);
-  transition: all 0.3s;
-  margin-top: 10px;
-  font-size: 1rem;
-}
-
-.submit-btn:hover {
-  background: #096dd9; /* Azul más oscuro para hover */
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-heavy);
-}
-
-.submit-btn:active {
-  background: #0050b3;
-  transform: translateY(0);
-}
-
-/* Términos y condiciones */
-.auth-form :deep(.ant-form-item-control-input-content) .ant-checkbox-wrapper a {
-  color: var(--primary-color);
-  text-decoration: none;
-}
-
-.auth-form :deep(.ant-form-item-control-input-content) .ant-checkbox-wrapper a:hover {
-  text-decoration: underline;
-}
-
-/* Sección de ayuda */
-.help-section {
-  margin-top: 30px;
-}
-
-.help-text {
-  text-align: center;
-  color: var(--secondary-color);
-  font-size: 0.875rem;
-  margin: 0;
-  line-height: 1.5;
-}
-
-.help-text a {
-  color: var(--primary-color);
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.help-text a:hover {
-  text-decoration: underline;
-}
-
-/* Footer */
-.login-footer {
-  background: var(--una-blue);
-  color: white;
-  padding: 20px 0;
-  margin-top: auto;
-  width: 100%;
-}
-
-.footer-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-  text-align: center;
-}
-
-.footer-container p {
-  margin: 0 0 12px;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.75rem;
-}
-
-.footer-links {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-  flex-wrap: wrap;
-}
-
-.footer-links a {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.75rem;
-  text-decoration: none;
-  transition: color 0.3s;
-  cursor: pointer;
-}
-
-.footer-links a:hover {
-  color: var(--una-gold);
-  text-decoration: underline;
-}
-
-/* Modales */
-.modal-content {
-  padding: 16px 0;
-  font-family: var(--font-family);
-  font-size: 0.938rem;
-}
-
-.modal-content h3 {
-  color: var(--primary-color);
-  margin-bottom: 16px;
-  font-size: 1.125rem;
-}
-
-.modal-content p {
-  color: var(--secondary-color);
-  margin-bottom: 12px;
-  line-height: 1.6;
-}
-
-/* =========================================== */
-/* MEDIA QUERIES PARA RESPONSIVIDAD */
-/* =========================================== */
-
-/* Tablets pequeñas y móviles grandes (576px - 768px) */
-@media (max-width: 768px) {
-  .header-container {
-    flex-direction: column;
-    gap: 12px;
-    text-align: center;
-  }
-  
-  .una-logo {
-    justify-content: center;
-  }
-  
-  .header-contact {
-    text-align: center;
-    align-items: center;
-  }
-  
-  .contact-item {
-    justify-content: center;
-  }
-  
-  .login-main {
-    padding: 20px 15px;
-  }
-  
-  .auth-card {
-    padding: 30px 25px;
-  }
-  
-  .card-logo-text h2 {
-    font-size: 1.25rem;
-  }
-  
-  .auth-tabs :deep(.ant-tabs-tab) {
-    padding: 10px 20px;
-    font-size: 0.938rem;
-  }
-  
-  .form-header h3 {
-    font-size: 1.125rem;
-  }
-  
-  .submit-btn {
-    height: 46px;
-    font-size: 0.938rem;
-  }
-}
-
-/* Móviles pequeños y medianos (480px - 576px) */
-@media (max-width: 576px) {
-  .login-header {
-    padding: 10px 0;
-  }
-  
-  .una-main-title {
-    font-size: 1rem;
-  }
-  
-  .una-subtitle {
-    font-size: 0.875rem;
-  }
-  
-  .logo-wrapper {
-    width: 40px;
-    height: 40px;
-  }
-  
-  .contact-item {
-    font-size: 0.813rem;
-  }
-  
-  .login-main {
-    padding: 15px 10px;
-  }
-  
-  .auth-card {
-    padding: 25px 20px;
-    border-radius: 10px;
-  }
-  
-  .card-logo {
-    margin-bottom: 25px;
-  }
-  
-  .logo-icon-small {
-    width: 50px;
-    height: 50px;
-  }
-  
-  .card-logo-text h2 {
-    font-size: 1.125rem;
-  }
-  
-  .card-logo-text span {
-    font-size: 0.813rem;
-  }
-  
-  .auth-tabs :deep(.ant-tabs-nav) {
-    margin-bottom: 25px;
-  }
-  
-  .auth-tabs :deep(.ant-tabs-tab) {
-    padding: 8px 16px;
-    font-size: 0.875rem;
-  }
-  
-  .form-header {
-    margin-bottom: 20px;
-  }
-  
-  .form-header h3 {
-    font-size: 1rem;
-  }
-  
-  .form-header p {
-    font-size: 0.813rem;
-  }
-  
-  .auth-form :deep(.ant-form-item-label) {
-    font-size: 0.813rem;
-  }
-  
-  .auth-form :deep(.ant-input),
-  .auth-form :deep(.ant-input-password) {
-    font-size: 0.875rem;
-  }
-  
-  .form-options {
-    font-size: 0.813rem;
-  }
-  
-  .switch-auth {
-    font-size: 0.813rem;
-  }
-  
-  .error-message {
-    padding: 10px 14px;
-    font-size: 0.813rem;
-  }
-  
-  .submit-btn {
-    height: 44px;
-    font-size: 0.875rem;
-  }
-  
-  .help-section {
-    margin-top: 25px;
-  }
-  
-  .help-text {
-    font-size: 0.813rem;
-  }
-  
-  .login-footer {
-    padding: 16px 0;
-  }
-  
-  .footer-container p {
-    font-size: 0.688rem;
-    margin-bottom: 10px;
-  }
-  
-  .footer-links {
-    gap: 15px;
-  }
-  
-  .footer-links a {
-    font-size: 0.688rem;
-  }
-}
-
-/* Móviles muy pequeños (menos de 480px) */
-@media (max-width: 480px) {
-  .una-logo {
-    flex-direction: column;
-    text-align: center;
-    gap: 10px;
-  }
-  
-  .header-contact {
-    width: 100%;
-  }
-  
-  .login-main {
-    padding: 10px 8px;
-  }
-  
-  .auth-card {
-    padding: 20px 16px;
-  }
-  
-  .auth-tabs :deep(.ant-tabs-tab) {
-    padding: 6px 12px;
-    font-size: 0.813rem;
-  }
-  
-  .card-logo-text h2 {
-    font-size: 1rem;
-  }
-  
-  .form-options {
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-  .form-options :deep(.ant-checkbox-wrapper) {
-    width: 100%;
-  }
-  
-  .form-options :deep(.ant-btn-link) {
-    align-self: flex-start;
-  }
-  
-  .submit-btn {
-    height: 42px;
-  }
-  
-  .modal-content {
-    font-size: 0.875rem;
-  }
-  
-  .modal-content h3 {
-    font-size: 1rem;
-  }
-}
-
-/* Pantallas muy altas */
-@media (min-height: 800px) {
-  .login-main {
-    padding-top: 50px;
-    padding-bottom: 50px;
-  }
 }
-</style>
\ No newline at end of file
+</style>