web_Admision/front/src/components/WebPageSections/ContactSection.vue

<template>
  <section class="process-section" aria-labelledby="faq-title">
    <div class="section-container">

      <div class="section-header">
        <h2 id="faq-title" class="section-title">
          Preguntas Frecuentes
        </h2>
        <p class="section-subtitle">
          Resolvemos las dudas más comunes sobre el proceso de admisión y el uso de nuestra plataforma.
        </p>
      </div>

      <div class="process-card">


        <a-collapse accordion class="modern-collapse">

          <a-collapse-panel key="1" header="01. ¿Puedo postular con DNI caducado?">
            No, su DNI debe estar vigente al momento de la inscripción.
            En su defecto, puede presentar la Hoja C4 o el ticket de trámite acompañado de una copia del DNI.
          </a-collapse-panel>

          <a-collapse-panel key="2" header="02. ¿Qué requisitos debo presentar si postulo como persona con discapacidad?">
            Certificado de Discapacidad emitido por entidades de salud acreditadas en el RENIPRESS.
            Este debe ser adjuntado junto a los demás requisitos.
          </a-collapse-panel>

          <a-collapse-panel key="3" header="03. ¿Qué hago si ingreso mal mis datos en la preinscripción?">
            No es posible modificarlos en línea una vez guardados.
            Debe acercarse al local de inscripción y solicitar ayuda en la oficina de soporte técnico.
          </a-collapse-panel>

          <a-collapse-panel key="4" header="04. ¿Cuáles son los códigos para realizar los pagos?">
            <p><b>Código 26:</b> Derechos de Admisión.</p>
            <p><b>Código 27:</b> Rezagados al proceso de inscripción.</p>
            <p><b>Código 28:</b> Carpeta de postulante.</p>
          </a-collapse-panel>

          <a-collapse-panel key="5" header="05. ¿Cómo debo realizar la preinscripción e inscripción?">
            Ingrese a admision.unap.edu.pe para la preinscripción.
            <br /><br />
            La inscripción presencial se realiza según el último dígito del DNI, según el cronograma oficial.
          </a-collapse-panel>

          <a-collapse-panel key="6" header="06. ¿Qué requisitos debo presentar si postulo a Medicina Humana o Educación Física?">
            Constancia de evaluación médica emitida por un establecimiento de salud primario,
            además de los demás requisitos exigidos.
          </a-collapse-panel>

          <a-collapse-panel key="7" header="07. ¿Puedo cambiar de programa de estudio luego de inscribirme?">
            Sí. Tras obtener su constancia de inscripción, debe realizar un pago de S/.100 (Código 27)
            en caja de la Universidad o Banco de la Nación, incluyendo comisión.
          </a-collapse-panel>

          <a-collapse-panel key="8" header="08. ¿Qué debo traer para inscribirme presencialmente?">
            <ul>
              <li>Comprobantes de pago o vouchers</li>
              <li>DNI original y copia</li>
              <li>Solicitud de Preinscripción impresa</li>
              <li>Certificado de estudios original y copia</li>
            </ul>
          </a-collapse-panel>

          <a-collapse-panel key="9" header="09. ¿Los postulantes con discapacidad hacen cola?">
            No. Deben presentar su Certificado de Discapacidad y se les brindará atención preferencial.
          </a-collapse-panel>

        </a-collapse>

      </div>
    </div>
  </section>
</template>

<style scoped>

.process-section {
  padding: 30px 0;
  background: #ffffff;
  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: 18px;
}

.section-title {
  font-size: 2.1rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 6px 0;
}

.section-subtitle {
  font-size: 1rem;
  color: #777;
  margin: 0;
}

.process-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  background: #fff;
}


.illustration-box {
  text-align: center;
  margin-bottom: 20px;
}

.illustration-img {
  width: 160px;
  margin-bottom: 8px;
}

.illustration-text {
  font-size: 0.9rem;
  color: #6b7280;
}

.modern-collapse {
  background: transparent;
}

.modern-collapse :deep(.ant-collapse-item) {
  border-radius: 10px !important;
  margin-bottom: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.modern-collapse :deep(.ant-collapse-header) {
  font-weight: 700;
  color: #1e3a8a;
}

.modern-collapse :deep(.ant-collapse-content) {
  background: #ffffff;
  border-top: 1px solid #eef2f7;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.6rem;
  }

  .process-card {
    padding: 14px 12px;
  }

  .illustration-img {
    width: 120px;
  }
}
</style>