/* Personalizar el CardField usando el ID */
     #card-element {
         border: 2px solid #0570de;
         /* Color del borde */
         border-radius: 4px;
         /* Radio de borde */
         padding: 10px;
         /* Espaciado interno */
         background-color: #ffffff;
         /* Color de fondo */
         color: #30313d;
         /* Color de texto */
         font-family: 'Ideal Sans', sans-serif;
         /* Fuente */
         font-size: 16px;
         /* Tamaño de fuente */
     }

     /* Estilo en caso de error */
     #card-element.invalid {
         border-color: #df1b41;
         /* Color del borde en caso de error */
     }

     body {
         font-family: 'Montserrat', sans-serif;
         background-color: #222;
         color: #fff;
     }

     /* Estilos del encabezado */
     .header-banner {
         background: url('../post.jpg') center center no-repeat;
         background-size: cover;
         color: white;
         height: 400px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         position: relative;
         box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
     }

     .header-banner h1 {
         font-size: 3.5rem;
         text-transform: uppercase;
         font-weight: bold;
     }

     /* Estilos de la tarjeta de evento */
     .event-card {
         background-color: #333;
         border-radius: 15px;
         padding: 30px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
     }

     .event-card h2 {
         color: #f4c542;
         font-size: 2.5rem;
     }

     .event-details {
         font-size: 1.1rem;
         line-height: 1.7;
         color: #ccc;
     }

     .event-details strong {
         color: #f4c542;
     }

     .ticket-info {
         margin: 20px 0;
         color: #f4c542;
     }

     /* Botón de compra */
     .btn-buy {
         background-color: #f4c542;
         color: #222;
         font-weight: bold;
         font-size: 1.3rem;
         border-radius: 50px;
         padding: 15px 30px;
         transition: background-color 0.3s;
     }

     .btn-buy:hover {
         background-color: #e0a800;
     }

     /* Estilos del formulario */
     .purchase-section {
         margin-top: 40px;
     }

     .purchase-section input,
     .purchase-section select {
         background-color: #444;
         color: white;
         border-radius: 5px;
         border: 1px solid #555;
     }

     .purchase-section label {
         color: #f4c542;
         font-weight: bold;
     }

     .purchase-section .form-control {
         padding: 10px;
     }

     /* Estilos del modal */
     .modal-content {
         background-color: #333;
         color: white;
         border-radius: 10px;
         padding: 20px;
     }

     .modal-header {
         border-bottom: none;
     }

     .modal-title {
         color: #f4c542;
     }

     .modal-body input {
         background-color: #444;
         color: white;
         border: 1px solid #555;
     }

     .modal-footer button {
         background-color: #f4c542;
         color: #222;
         font-weight: bold;
         border-radius: 30px;
     }

     .modal-footer button:hover {
         background-color: #e0a800;
     }

     @keyframes pulse-colors {
         0% {
             box-shadow: 0 0 0 0 rgba(244, 197, 66, 0.7), 0 0 15px 0 rgba(255, 0, 0, 0.7);
         }

         25% {
             box-shadow: 0 0 0 15px rgba(0, 128, 0, 0), 0 0 30px 15px rgba(0, 128, 0, 0.7);
         }

         50% {
             box-shadow: 0 0 0 15px rgba(0, 0, 255, 0), 0 0 45px 30px rgba(0, 0, 255, 0.7);
         }

         75% {
             box-shadow: 0 0 0 30px rgba(255, 165, 0, 0), 0 0 60px 45px rgba(255, 165, 0, 0.7);
         }

         100% {
             box-shadow: 0 0 0 0 rgba(244, 197, 66, 0.7), 0 0 15px 0 rgba(255, 0, 0, 0.7);
         }
     }

     #translateBtn {
         position: fixed;
         bottom: 20px;
         right: 20px;
         background-color: #f4c542;
         color: #222;
         font-weight: bold;
         padding: 10px 20px;
         border-radius: 50px;
         cursor: pointer;
         z-index: 1000;
         transition: background-color 0.3s, transform 0.3s;
         animation: pulse-colors 2s infinite;
     }

     #translateBtn:hover {
         transform: scale(1.1);
         /* Aumentar el tamaño ligeramente cuando se pasa el mouse */
     }

     /* Estilo para el contador de tiempo */
     #countdown-timer {
         font-size: 68px;
         /* Tamaño grande del texto */
         font-weight: bold;
         /* Texto en negrita */
         color: #f39c12;
         /* Color del texto (puedes cambiarlo según prefieras) */
         text-align: center;
         /* Centrado */
         margin-top: 20px;
         /* Espacio superior */
         font-family: 'Montserrat', sans-serif;
         /* Fuente consistente con el resto del diseño */
     }