/* Estilos del header */
        body {
          font-family: "URW Geometric", sans-serif;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        .navbar {
          background: linear-gradient(to right, #822F0A, #E07D3A);
          position: relative; 
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1000;
          padding: 20px 0;
          backdrop-filter: blur(1px);
        }
        
        .navbar-brand img {
          height: 60px;
          border-radius: 5px;
        }
        
        .navbar-toggler {
            border: none !important;
            background: linear-gradient(to right, #0F2254, #2D4FA3);
            padding: 10px;
            height: 40px;
            outline: none !important;
        }
        
        .navbar-toggler:focus, 
        .navbar-toggler:active {
            outline: none !important;
            box-shadow: none !important;
            border: none !important;
        }
        
        .navbar-toggler-icon {
            background-image: none;
            width: 30px;
            height: 3px;
            background-color: #ffffff;
            display: block;
            position: relative;
            transition: all 0.3s ease-in-out;
        }
        
        .navbar-toggler-icon::before,
        .navbar-toggler-icon::after {
            content: "";
            width: 30px;
            height: 3px;
            background-color: #ffffff;
            position: absolute;
            left: 0;
            transition: all 0.3s ease-in-out;
        }
        
        .navbar-toggler-icon::before {
            top: -8px;
        }
        
        .navbar-toggler-icon::after {
            top: 8px;
        }
        
        .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
            background-color: transparent;
        }
        
        .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
            transform: rotate(45deg);
            top: 0;
        }
        
        .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
            transform: rotate(-45deg);
            top: 0;
        }


        .nav-link {
          color: white !important;
          font-size: 18px;
          font-weight: bold;
          font-family: "Novecento", sans-serif;
          position: relative;
          transition: color 0.3s ease;
        }
        
        .nav-link::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -3px;
          width: 100%;
          height: 2px;
          background-color: #0F2254;
          transform: scaleX(0);
          transition: transform 0.3s ease-in-out;
        }
        
        .nav-link:hover {
          color: #0F2254 !important;
        }
        
        .nav-link:hover::after {
          transform: scaleX(1);
        }
        .auth-buttons .btn {
          background: linear-gradient(to right, #0F2254, #2D4FA3);
          border: none;
          color: white;
          font-size: 14px;
          font-weight: bold;
          transition: background 0.3s ease;
        }
        .auth-buttons .btn:hover {
          background: linear-gradient(to right, #2D4FA3, #0F2254);
        }
        
        @media (max-width: 991px) {
            
          .navbar {
              background: linear-gradient(to right, #822F0A, #E07D3A);
              backdrop-filter: blur(1px);
            }
          .navbar-collapse {
            text-align: center;
          }
          .navbar-nav {
            width: 100%;
            justify-content: center;
          }
          .auth-buttons {
            justify-content: center !important;
            flex-wrap: nowrap;
          }
          .auth-buttons .btn {
            width: 45%;
          }
          
          
          }
      
      /* Estilos de index */
      
        .slider {
          width: 100%;
          height: 80vh;
          overflow: hidden;
          position: relative;
        }

        .slider::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 12px;
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        
        .slide.active {
            opacity: 1;
            position: relative;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
        }
        
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
        }
        
        .content {
            z-index: 2;
            max-width: 80%;
            margin-top: 10px;
        }
        
        @media (max-width: 768px) {
            .slider {
                height: 60vh;
            }
        
            .intro-text {
                font-size: 1rem;
            }
            
            h4 {
                font-size: 1.2rem;
            }
            
            .content {
                width: 90%;
            }
        }
        
       .btn {
        background: linear-gradient(to right, #0F2254, #2D4FA3);
        color: white;
        font-size: 14px;
        border: none;
        font-weight: bold;
        transition: background 0.3s ease;
      }
      .btn:hover {
        background: linear-gradient(to right, #2D4FA3, #0F2254);
        color: white;
      }
      
      /*Eventos*/
        #seccion-eventos {
            width: 100vw;
            height: 110vh;
            position: relative;
            margin: 0;
            padding: 12px;
            max-width: 100%;
        }
        
        #seccion-eventos::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 12px;
            background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 10px);
        } 
         
        #seccion-eventos::after {
            content: ""; 
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 12px;
            background: linear-gradient(to top, black, rgba(0, 0, 0, 0) 10px);
        }
        
        #seccion-eventos h2 {
            margin-top: 15px !important;
            color: #A34710;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
            width: 80%;
            margin: 0 auto;
            font-weight: bold;
        }
        
        #eventosContainer {
            display: flex; 
            gap: 15px;
            justify-content: flex-start;
            align-items: center;
            overflow: hidden;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        
        .oculto {
            display: none;
        }
        
        .event-card {
            position: relative;
            overflow: hidden;
            flex: 0 0 auto;
            width: 100%;
            max-width: 250px;
            border-radius: 5px;
            box-shadow: 0px 4px 8px rgba(255, 0, 0, 0.5);
        }
    
        .event-card .card-body {
            background-color: #FDE7D1;
            padding: 5px;
        }
        
        .event-title-overlay {
            position: absolute;
            top: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
            color: #fff;
            text-align: center;
            padding: 10px;
            z-index: 2;
        }
        
        .event-title {
            margin: 0;
            font-size: 1.1rem;
            font-weight: bold;
            text-shadow: 1px 1px 4px #CB6018;
        }
    
        .event-card .card-text {
            font-size: 16px;
        }
        
        .event-title {
            margin: 0;
            font-size: 1.1rem;
            font-weight: bold;
        }
        
        .card-img-top {
            width: 100%;
            height: auto !important;
            object-fit: cover;
            object-position: top;
        }
    
        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            cursor: pointer;
            padding: 10px 15px;
            font-size: 24px;
            z-index: 10;
            border-radius: 50%;
        }
    
        .left-btn { left: 10px; }
        .right-btn { right: 10px; }
        
        
        #btn-card {
            width: 100%;
            background: linear-gradient(to right, #822F0A, #E07D3A);
            color: white;
            font-size: 15px;
            font-weight: bold;
            transition: background 0.3s ease, border-color 0.3s ease;
            text-align: center;
            padding: 10px 0;
        }
        
        #btn-card:hover {
            background: linear-gradient(to right, #E07D3A, #822F0A);
        }
    
        @media (min-width: 768px) {
            #eventosContainer {
                justify-content: flex-start;
            }
        
            .event-card {
                width: 40%;
            }
            
            
        } 
        
        @media (max-width: 768px) {
            #seccion-eventos {
                height: 115vh;
            } 
            
            #eventosContainer {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                display: flex;
                scroll-behavior: smooth;
                justify-content: flex-start;
            }
            
            .card-img-top {
                width: 100%;
                height: 385px;
            }
        
            .event-card {
                width: 100%;
                max-width: 100%;
                scroll-snap-align: center;
            }
            
            .event-card .card-text {
                font-size: 18px;
            }
        
            
        }
        
        
        
        
      
      /* Estilos de seccion de Contacto*/
      .contact-section {
        background: linear-gradient(to right, #822F0A, #E07D3A);
        color: #fff;
        padding: 2rem 0;
      }

      .contact-title {
        font-size: 1.5rem;
        border-bottom: 1px solid #fff;
        padding-bottom: 0.5rem; border-radius
        margin-bottom: 1rem;
      }

      .contact-section ul {
        list-style: none;
        padding: 0;
      }

      .contact-section ul li {
        margin: 0.5rem 0;
      }

      .contact-section ul li a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease-in-out;
      }

      .contact-section ul li a:hover {
        color: #00ced1;
      }

        .social-icons {
            padding: 10px;
        }
        
        .social-link {
            font-size: 1.8rem;
            color: white;
            transition: transform 0.3s ease, text-shadow 0.3s ease;
        }
        
        .social-link:hover {
            transform: scale(1.2);
            text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
        }
      
      /* Estilos del footer */
      footer {
            background: black;
            color: #fff;
            text-align: center;
            padding: 1rem 0;
        }
        
        .developed {
            text-decoration: none;
            color: #00CED1;
            font-weight: bold;
            transition: all 0.3s ease-in-out;
        }
        
        .developed:hover {
            text-shadow: 2px 2px 5px rgba(0, 206, 209, 0.7);
            transform: scale(1.1);
        }
        
        /*SECCION DE PAGINA DE EVENTO ESPECIFICO*/
       
        #section-portada {
            position: relative;
            padding: 60px 0;
            background-color: white;
            height: 85vh;
            
        }
        
        .overlay-gradient {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right,  
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.7) 50%,
                rgba(0, 0, 0, 0.6) 70%,
                rgba(0, 0, 0, 0.5) 100%
            );
        }
        
        #texto-portada {
            margin-top: 20px;
        }

        h1 {
            color: white;
            text-transform: uppercase;
            font-weight: bold;
            text-shadow: 2px 2px 4px #CB6018;
        }
        
        .contador-container {
            background: white;
            padding: 10px;
            border-radius: 16px;
            display: inline-block;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            font-family: 'Arial', sans-serif;
            margin: 0 auto;
            margin-top: 20px;
        }
        
        .contador-titulo {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #CB6018;
        }
        
        .contador-numeros {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        
        .contador-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .contador-item div {
            background: #FDE7D1;
            padding: 8px 5px;
            border-radius: 8px;
            font-size: 22px;
            font-weight: bold;
            min-width: 38px;
            text-align: center;
            color: #333;
            box-shadow: inset 0 0 5px #CB6018;
        }
        
        .contador-item span {
            margin-top: 5px;
            font-size: 10px;
            color: #CB6018;
        }

        
        .text-primary {
            color: #A34710 !important;
            text-transform: uppercase;
            font-weight: bold;
            margin-bottom: 30px;
        }
        
        #modalVerDetallesLabel {
            color: black;
            font-size: 18px !important;
            margin-bottom: 40px;
        }

        .btn-success {
            background: linear-gradient(to right, #822F0A, #E07D3A);
            border: none;
            color: #0a1f44;
            border: none;
            color: #fff;
            font-size: 16px;
            padding: 12px 24px;
            border-radius: 30px;
            transition: transform 0.2s ease, background 0.3s ease;
        }

        .btn-success:hover {
            transform: scale(1.05);
            background: linear-gradient(to right, #E07D3A, #822F0A);
        }

        .badge.bg-primary {
            background: #007BFF;
            padding: 10px 20px;
            border-radius: 20px;
            font-weight: bold;
        }

        .bg-dark.opacity-50 {
            background-color: rgba(0, 0, 0, 0.7) !important;
        }

        .text-muted {
         color: #B0BEC5 !important;
        }       

        .fa-solid {
            color: #CB6018;
            font-size: 2rem;
            margin-top: 20px;
        }
        
        #fa-solid {
            color: #fff;
            font-size: 1.5rem;
            margin-top: 0;
        }
        
        #text-descripcion {
            color: black !important;
            margin-top: 10px;
        }

        
        #fecha-evento {
            font-size: 10px;
        }
        
        
        .btn-ver-detalles, .btn-inscribirse {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px; /* Espacio entre el texto y el icono */
        }
        
        #modalInscripcion .modal-content {
            background-color: #ffffff;
            color: #A34710;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        #modalInscripcion .modal-header {
            border-bottom: 1px solid #A34710;
            background: linear-gradient(to right, #822F0A, #E07D3A);
            color: #003366;
            font-weight: bold;
        }
        
        #modalInscripcion .modal-title {
            color: white !important;
            font-weight: bold;
        }
        
        #textoP {
            color: black !important;
        }
        
        #modalInscripcion .form-control {
            border-radius: 8px;
            border: 1px solid #A34710;
        }
        
        #modalInscripcion .form-label {
            color: #A34710;
            font-weight: bold;
            margin-top: 8px;
        }
        
        #modalInscripcion .form-check-label {
            color: black;
        }
        
        #modalInscripcion .form-control:focus {
            border-color: #003366;
            box-shadow: 0 0 5px rgba(0, 86, 179, 0.8);
        }
        
        #modalInscripcion .modal-footer {
            background-color: #f1f1f1;
            border-top: 1px solid #A34710;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }
        
        #modalInscripcion .modal-footer div {
            width: 100%;
        }
        
        #modalInscripcion .modal-footer button {
            width: 100%;
            margin-top: 10px;
        }
        
        .resumen-pedido {
            background: #f8f9fa; /* Color de fondo suave */
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #ddd;
            font-size: 14px;
            max-width: 100%; /* Ancho fijo para que se vea uniforme */
        }
        
        .resumen-pedido h6 {
            color: black;
            margin-top: 10px;
        }
        
        .linea-resumen {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dashed #ccc;
            padding: 4px 0;
        }
        
        .linea-resumen span {
            white-space: nowrap;
            color: black;
        }
        
        .linea-resumen strong {
            white-space: nowrap;
            color: black;
        }
        
        .linea-resumen.total {
            font-weight: bold;
            font-size: 16px;
            color: black; /* Color rojo para resaltar el total */
        }
        
        .text-success {
            font-weight: bold;
        }
        
        .cupon-container {
            margin-bottom: 20px; /* Margen superior */
            width: 100%;
            max-width: 400px; /* Ancho máximo */
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            background: #f9f9f9;
        }
        
        .cupon-toggle {
            background: #fff;
            padding: 10px;
            font-size: 16px;
            font-weight: bold;
            color: #A34710; /* Color negro */
            cursor: pointer; /* Cursor tipo pointer */
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ddd;
        }
        
        .cupon-toggle:hover {
            background: #f0f0f0; /* Cambio de color en hover */
        }
        
        .cupon-form {
            padding: 10px;
            border-top: 1px solid #ddd;
            display: flex;
            flex-direction: column; /* Asegura que los elementos estén en columna */
            gap: 10px; /* Espacio entre los elementos */
        }
        
        .cupon-input-group {
            display: flex;
            gap: 10px; /* Espacio entre el input y el botón */
        }
        
        .cupon-input-group input {
            width: 50%;
            flex: 1; /* El input ocupa todo el espacio disponible */
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .cupon-input-group button {
            background: linear-gradient(to right, #822F0A, #E07D3A);
            border: none;
            color: #0a1f44;
            border: none;
            color: #fff;
            font-size: 16px;
            padding: 12px 24px;
            border-radius: 30px;
            transition: transform 0.2s ease, background 0.3s ease;
        }

        
        .cupon-input-group button:hover {
            transform: scale(1.05);
            background: linear-gradient(to right, #E07D3A, #822F0A);
        }
        
        #mensajeCupon {
            margin-bottom: -8px;
        }


        
        #overlay {
            position: fixed; 
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            display: none;
            flex-direction: column;
            text-align: center;
        }
        
        #loadingContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        #loadingGif {
            width: 100px;
            height: auto;
        }
        
        #loadingText {
            margin-top: 10px;
            font-size: 18px;
            color: black;
            font-weight: bold;
        }
        
        #titulo-tickets {
            background: #FDE7D1;
            color: #A34710;
            padding: 15px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            font-weight: bold;
        }
        
        .accordion-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        
        .accordion-header button {
            background: #FDE7D1;
            color: #A34710;
            font-weight: bold;
            border-radius: 5px;
        }
        
        #check-form {
            width: 100%;
            margin: 0 auto;
            background-color: #FDE7D1;
            padding: 10px 30px; /* Más espacio interno */
            margin-bottom: 5px;
            border-radius: 6px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px; /* Separa los elementos internos */
            cursor: pointer;
            box-shadow: 0 0 8px rgba(18, 78, 150, 0.2);
        }
        
        /* Estiliza el input radio */
        .categoria-option {
            appearance: none; /* Oculta el radio nativo */
            width: 20px;
            height: 20px;
            border: 2px solid #A34710;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-color: white;
            margin-right: 10px; /* Separa el radio del texto */
        }
        
        /* Estilo cuando está seleccionado */
        .categoria-option:checked {
            background-color: #A34710;
            border: 2px solid #A34710;
            box-shadow: 0 0 4px rgba(18, 78, 150, 0.5);
            position: relative;
        }
        
        /* Punto interno cuando está seleccionado */
        .categoria-option:checked::after {
            content: "";
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
        }
        
        h5 {
            text-align: center;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 1rem !important;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
            margin-bottom: 5px !important;
        }
        
        h4 {
            text-align: center;
            font-weight: bold;
            font-size: 18px !important;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
            margin-bottom: 10px !important;
        }
        
        
        #btnVolver {
            background: none;
            border: none;
            color: #A34710;
            font-size: 1rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            cursor: pointer;
            text-decoration: none;
            gap: 8px;
        }
        
        #btnVolver::before {
            content: "\f104";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 1.2rem;
        }
        
        .error-input {
            border: 2px solid red;
        }
        
        .error-message {
            color: red;
            font-size: 14px;
            display: block;
            margin-top: 5px;
        }