/* ========================================
   Zybo - Registro de Pago
   Estilo: Neumórfico
   Tipografías: Visby (marca) + Roboto (cuerpo)
   ======================================== */

/* Fuentes de marca */
@font-face {
   font-family: 'Visby';
   src: local('Visby CF Bold'), local('VisbyCF-Bold'), local('Visby Bold');
   font-weight: 700;
   font-style: normal;
}
@font-face {
   font-family: 'Visby';
   src: local('Visby CF Medium'), local('VisbyCF-Medium'), local('Visby Medium');
   font-weight: 500;
   font-style: normal;
}
@font-face {
   font-family: 'Visby';
   src: local('Visby CF Regular'), local('VisbyCF-Regular'), local('Visby');
   font-weight: 400;
   font-style: normal;
}

/* Reset */
*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: 'Roboto', sans-serif;
   background-color: #e8eaf0;
   color: #333;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

/* Layout */
.page-wrapper {
   width: 100%;
   max-width: 440px;
   margin: 0 auto;
   padding: 24px 16px;
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

/* Card principal neumorfismo */
.neu-card {
   background: #ffffff;
   border-radius: 24px;
   padding: 36px 28px 32px;
   box-shadow:
      8px 8px 20px rgba(0, 0, 0, 0.12),
      -8px -8px 20px rgba(255, 255, 255, 0.9);
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* Logo */
.logo-container {
   text-align: center;
   margin-bottom: 28px;
   width: 100%;
}

.logo-container img {
   max-height: 55px;
   width: auto;
   opacity: 0.95;
}

/* Titulo */
.section-title {
   text-align: center;
   margin-bottom: 24px;
   width: 100%;
}

.section-title h2 {
   font-family: 'Visby', 'Roboto', sans-serif;
   font-weight: 700;
   font-size: 1.1rem;
   color: #8800ff;
   letter-spacing: 1px;
   margin-bottom: 4px;
}

.section-title p {
   font-size: 0.8rem;
   color: #999;
   font-weight: 400;
   letter-spacing: 0.5px;
}

.data-subtitle {
   font-size: 0.8rem;
   color: #999;
   font-weight: 400;
   margin-bottom: 8px;
   width: 100%;
}

/* Campos de datos */
.data-fields {
   margin-bottom: 20px;
   width: 100%;
}

.data-row {
   background: transparent;
   padding: 10px 0;
   margin-bottom: 4px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #f0f0f0;
}

.data-row:last-of-type {
   margin-bottom: 0;
   border-bottom: none;
}

.data-label {
   font-size: 0.8rem;
   color: #999;
   font-weight: 400;
   flex-shrink: 0;
   margin-right: 12px;
}

.data-value {
   font-size: 0.9rem;
   font-weight: 500;
   color: #444;
   text-align: right;
}

/* Mensaje de verificacion */
.verify-msg {
   text-align: center;
   font-size: 0.82rem;
   color: #aaa;
   margin: 20px 0;
   font-weight: 300;
   width: 100%;
}

/* Boton de pago Wompi */
.payment-section {
   text-align: center;
   margin-bottom: 16px;
   width: 100%;
   display: flex;
   justify-content: center;
}

.payment-section form {
   display: flex;
   justify-content: center;
   width: 100%;
}

.payment-section .waybox-button {
   background: #8800ff !important;
   border-radius: 50px !important;
   box-shadow:
      4px 4px 12px rgba(136, 0, 255, 0.3),
      -4px -4px 12px rgba(255, 255, 255, 0.7) !important;
   transition: all 0.3s ease !important;
   display: block !important;
   margin: 0 auto !important;
}

.payment-section .waybox-button:hover {
   background: #7700e6 !important;
   box-shadow:
      2px 2px 8px rgba(136, 0, 255, 0.4),
      -2px -2px 8px rgba(255, 255, 255, 0.5) !important;
   transform: translateY(1px) !important;
}

.payment-section .waybox-button:active {
   box-shadow:
      inset 3px 3px 6px rgba(0, 0, 0, 0.15),
      inset -3px -3px 6px rgba(255, 255, 255, 0.1) !important;
   transform: translateY(2px) !important;
}

/* Boton WhatsApp */
.whatsapp-btn {
   text-align: center;
   margin-top: 8px;
   width: 100%;
   display: flex;
   justify-content: center;
}

.whatsapp-btn a {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: linear-gradient(135deg, #febd47, #f0a820);
   color: #8800ff;
   padding: 14px 32px;
   border-radius: 50px;
   text-decoration: none;
   font-family: 'Visby', 'Roboto', sans-serif;
   font-size: 0.88rem;
   font-weight: 700;
   letter-spacing: 0.3px;
   box-shadow:
      4px 4px 12px rgba(0, 0, 0, 0.12),
      -4px -4px 12px rgba(255, 255, 255, 0.7);
   transition: all 0.3s ease;
}

.whatsapp-btn a:hover {
   box-shadow:
      2px 2px 6px rgba(0, 0, 0, 0.15),
      -2px -2px 6px rgba(255, 255, 255, 0.5);
   transform: translateY(1px);
}

.whatsapp-btn img {
   width: 24px;
   height: 24px;
}

/* Footer */
footer {
   text-align: center;
   padding: 20px 20px 16px;
   width: 100%;
   max-width: 440px;
}

footer p {
   font-size: 0.7rem;
   color: #bbb;
   margin-bottom: 10px;
   font-weight: 400;
}

.footer-logos {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 14px;
}

.footer-logos img {
   height: 24px;
   opacity: 0.5;
   transition: opacity 0.3s;
}

.footer-logos img:hover {
   opacity: 0.8;
}

/* ========================================
   Responsive
   ======================================== */

/* Tablets y desktop */
@media (min-width: 600px) {
   .page-wrapper {
      padding: 48px 24px;
   }

   .neu-card {
      padding: 44px 36px 36px;
      border-radius: 28px;
   }

   .logo-container img {
      max-height: 65px;
   }

   .section-title h2 {
      font-size: 1.25rem;
   }

   .data-row {
      padding: 16px 24px;
   }

   .data-label {
      font-size: 0.85rem;
   }

   .data-value {
      font-size: 0.95rem;
   }
}

/* Movil pequeno */
@media (max-width: 380px) {
   .neu-card {
      padding: 28px 18px 24px;
      border-radius: 20px;
   }

   .logo-container img {
      max-height: 45px;
   }

   .section-title h2 {
      font-size: 1rem;
   }

   .data-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 12px 16px;
   }

   .data-value {
      text-align: left;
   }

   .whatsapp-btn a {
      padding: 12px 24px;
      font-size: 0.82rem;
   }
}