/* -----------------------------------------------
    Estilos CSS Integrados para la Página del Evento
    Versión 1.1 - Actualizada con nuevos estilos de formulario y menú responsivo
    ----------------------------------------------- */

    /* 1. RESET Y CONFIGURACIÓN GENERAL DEL BODY */
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      overflow-x: hidden;
      scroll-behavior: smooth;
      font-family: 'Raleway', sans-serif;
      color: #fff;
      background-color: #212121;
    }

    * {
      box-sizing: border-box;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    input {
      margin: 0;
      padding: 0;
    }

    a {
      color: #fff;
      text-decoration: none;
      transition: color 0.3s;
    }

    a:hover {
      color: #fff;
    }

    /* 2. HEADER Y VIDEO DE FONDO A PANTALLA COMPLETA */
    .header {
      position: relative;
      width: 100vw;
      height: 80vh; /* Tamaño del Video */
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .header::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* Superposición oscura para el video */
      z-index: 1;
    }

    .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .video-background iframe {
      width: 100vw;
      height: 56.25vw;
      min-height: 100vh; /* Asegura que sea al menos la altura del viewport */
      min-width: 177.77vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }

    .header__content-wrapper {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 0 20px;
    }

    .header__center {
      max-width: 900px;
      margin: 0 auto;
    }

    .header__title {
      font-size: 3em;
      text-transform: uppercase;
      padding: 40px 0 20px;
      line-height: 1.6;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      font-weight: bold;
    }

    .header__subtitle {
      font-size: 1.5em;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      line-height: 1.5;
    }

    .btn {
      border: 1px solid #fff;
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-size: 13px;
      border-radius: 0;
      padding: 20px 27px;
      background-color: transparent;
      transition: all 0.3s;
      min-width: 140px;
      text-transform: uppercase;
      display: inline-block;
    }

    .btn__accent {
      background-color: #fff;
      color: #212121;
    }

    .btn__accent:hover {
      background-color: transparent;
      border-color: #fff;
      color: #fff;
    }

    /* 3. MENÚ DE NAVEGACIÓN FIJO */
    .menu-fix {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      transition: background-color 0.3s ease;
      background-color: rgba(0, 0, 0, 0.2);
      /* Inicia semitransparente */
    }

    .menu-fix.scrolled {
      background-color: #000;
      /* Se vuelve negro sólido al hacer scroll */
    }

    .header__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      position: relative;
      /* Necesario para posicionar el menú móvil */
    }

    .logo {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: url('images/logosvg.svg') no-repeat center;
      /* Placeholder para el logo */
      background-size: contain;
    }

    .header__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      /* Por defecto para desktop */
    }

    .header__list li {
      display: inline-block;
      margin-left: 25px;
    }

    .header__list li a {
      padding: 10px;
      font-weight: 500;
      border-bottom: 2px solid transparent;
      transition: border-color 0.3s;
    }

    .header__list li a:hover {
      border-color: #fff;
    }

    /* Botón de hamburguesa */
    .hamburger-menu {
      display: none;
      /* Oculto por defecto en desktop */
      background: none;
      border: none;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
      padding: 5px 10px;
      z-index: 1001;
      /* Asegura que esté por encima del menú colapsado */
    }

    /* 4. SECCIÓN DIVISORIA "REGÍSTRATE" */
    .divider-section {
      background-color: #0039A6;
      height: 155px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .divider-section h2 {
      color: #fff;
      font-weight: bold;
      font-size: 2.5rem;
      margin: 0;
    }

    /* 5. SECCIÓN DE CONTACTO Y FORMULARIO (FONDO BLANCO) */
    .contacts {
      padding: 70px 0;
      background-color: #ffffff;
      color: #212121;
    }

    .contacts__header {
      text-align: center;
      margin-bottom: 20px;
      font-size: 2.5rem;
      color: #212121;
    }

    .contacts__text {
      text-align: center;
      margin-bottom: 40px;
      font-size: 1.2rem;
      color: #555;
    }

    /* Estilos para los nuevos elementos del formulario */
    .container__form {
      padding: 20px;
    }

    .container__form .h5 {
      color: #0039A6;
      /* Color del texto "SOY" y "ME INTERESA" */
      font-weight: bold;
      margin-bottom: 15px;
    }

    .md-form {
      margin-bottom: 20px;
      position: relative;
    }

    .md-form .form-control {
      border: 1px solid #ced4da;
      border-radius: 5px;
      padding: 10px 15px;
      width: 100%;
      background-color: #f8f9fa;
      color: #212121;
    }

    .md-form .form-control::placeholder {
      color: #6c757d;
    }

    .md-form select.form-control {
      /* Se agregó .form-control a esta regla para los selects */
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 30px;
    }

    /* Estilos para los errores de validación de jQuery Validate */
    .error {
      color: #dc3545;
      /* Rojo de Bootstrap para errores */
      font-size: 0.875em;
      margin-top: 0.25rem;
      display: block;
    }

    input.error,
    select.error {
      border-color: #dc3545 !important;
    }


    /* Checkbox y Aviso de Privacidad (Actualizado para Bootstrap 5) */
    .form-check-input:checked {
      /* Directamente al input para Bootstrap 5 */
      background-color: #0039A6;
      border-color: #0039A6;
    }

    /* Para que el checkmark interno sea blanco y visible */
    .form-check-input:checked[type="checkbox"] {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }

    .form-check-label {
      /* Cambiado de .custom-control-label */
      color: #212121;
      font-size: 0.9em;
    }

    .form-check-label a.container__form_aviso {
      /* Cambiado de .custom-control-label */
      color: #0039A6;
      text-decoration: underline;
    }

    .form-check-label a.container__form_aviso:hover {
      /* Cambiado de .custom-control-label */
      color: #002f8a;
    }


    /* Botón de Enviar (nuevo estilo) */
    #btnEnviar {
      background-color: #0039A6;
      color: #fff;
      border: none;
      padding: 15px 30px;
      font-size: 1.2em;
      font-weight: bold;
      border-radius: 50px;
      /* Redondeado como se solicitó */
      width: 100%;
      max-width: 300px;
      /* Para que no ocupe todo el ancho en desktop */
      margin: 20px auto;
      /* Centrar el botón */
      display: block;
      transition: background-color 0.3s ease;
    }

    #btnEnviar:hover:not(:disabled) {
      background-color: #002f8a;
      cursor: pointer;
    }

    #btnEnviar:disabled {
      background-color: #a0a0a0;
      /* cursor: not-allowed; */
    }

    /* Estilos para el texto de advertencia de correo duplicado */
    .md-form div[style*="font-size:small"] {
      font-size: 0.85em !important;
      color: #6c757d !important;
      margin-top: 5px;
    }

    /* 6. FOOTER */
    .footer {
      padding: 40px 0;
      background-color: #1a1a1a;
      text-align: center;
      color: #aaa;
    }

    .social {
      margin-top: 20px;
      /* Espacio entre "Síguenos" y los iconos */
    }

    .social a {
      display: inline-block;
      margin: 0 10px;
      font-size: 24px;
      color: #fff;
    }

    .social a:hover {
      color: #e73c7e;
    }

    /* Estilos para SVG y IMG dentro de social links */
    .social a svg,
    .social a img {
      /* Añadido .social a img */
      width: 24px;
      /* Coincide con font-size de .social a */
      height: 24px;
      /* Coincide con font-size de .social a */
      fill: currentColor;
      /* Asegura que el SVG herede el color del enlace */
      vertical-align: middle;
      /* Alinea los SVG con los íconos de Font Awesome */
    }

    .footer__copyright {
      margin-top: 20px;
      font-size: 0.9em;
    }

    .footer__copyright a {
      color: #fff;
    }

    /* 7. PRELOADER */
    .preloader {
      background: #000;
      bottom: 0;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 99999;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .status-block {
      width: 60px;
      height: 60px;
      border: 4px solid rgba(255, 255, 255, 0.2);
      border-left-color: #fff;
      border-radius: 50%;
      animation: spinner 1s infinite linear;
    }

    @keyframes spinner {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .header {
        height: 50vh; /* Ajusta la altura del header (y por ende del video) al 50% de la altura de la ventana */
      }

      .video-background iframe {
        /* Asegura que el iframe se adapte a la nueva altura del header */
        min-height: 100%;
      }

      .header__top {
        padding: 10px 0; /* <-- MODIFICADO: Reduce el padding vertical para hacer la navbar más pequeña */
      }

      .header__title {
        font-size: 2.2em;
      }

      .header__subtitle {
        font-size: 1.2em;
      }

      /* Mostrar botón de hamburguesa y ocultar lista normal */
      .hamburger-menu {
        display: block;
      }

      .header__list {
        display: none;
        /* Ocultar por defecto */
        flex-direction: column;
        position: absolute;
        top: 100%;
        /* Justo debajo de la barra de navegación */
        left: 0;
        width: 100%;
        background-color: #000;
        /* Fondo negro para el menú móvil */
        padding: 10px 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
        opacity: 0;
        pointer-events: none;
        /* No interactuable cuando oculto */
      }

      .header__list.active {
        display: flex;
        /* Mostrar cuando está activo */
        opacity: 1;
        pointer-events: auto;
        /* Interactuable cuando visible */
      }

      .header__list li {
        margin: 0;
        width: 100%;
        text-align: center;
      }

      .header__list li a {
        display: block;
        padding: 15px 20px;
        border-bottom: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        /* Separador para ítems */
      }

      .header__list li:first-child a {
        border-top: none;
      }

      .divider-section h2 {
        font-size: 1.8rem;
      }

      .contacts__header {
        font-size: 2rem;
      }

      .contacts__text {
        font-size: 1em;
      }

      .container__form {
        padding: 10px;
      }

      #btnEnviar {
        font-size: 1em;
        padding: 12px 20px;
      }
    }


  /* Estilos del modal de éxito (actualizados) */
    .modal {
        position: fixed; /* Stay in place */
        z-index: 10000; /* Sit on top of everything */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0,0,0,0.6); /* Semi-transparent black background */
        display: flex; /* Use flexbox to center content */
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
    }

    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 30px; /* Increased padding */
        border-radius: 10px; /* More rounded corners */
        box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.3), 0 5px 10px -2px rgba(0, 0, 0, 0.1); /* Stronger shadow */
        text-align: center;
        max-width: 90%;
        width: 450px; /* Slightly adjusted max width for better appearance */
        position: relative;
        animation: fadeInScale 0.3s ease-out; /* Add animation */
        color: #212121; /* Asegura que el texto sea visible en el modal blanco */
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .close-button {
        color: #aaa;
        position: absolute;
        top: 15px; /* Adjusted position */
        right: 20px; /* Adjusted position */
        font-size: 32px; /* Slightly larger close button */
        font-weight: bold;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .close-button:hover,
    .close-button:focus {
        color: #555; /* Darker on hover/focus */
        text-decoration: none;
        cursor: pointer;
    }

    .modal-content h2 {
        color: #0039A6; /* Blue heading for success */
        font-size: 2.2em; /* Larger heading */
        margin-bottom: 15px;
        font-weight: 700;
    }

    .modal-content p {
        color: #333; /* Darker text for readability */
        font-size: 1.1em;
        line-height: 1.5;
        margin-bottom: 25px;
    }

    .modal-content button {
        background-color: #0039A6; /* Blue button */
        color: white;
        padding: 12px 30px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1.05em;
        transition: background-color 0.3s ease;
    }

    .modal-content button:hover {
        background-color: #002f8a; /* Darker blue on hover */
    }

    /* Estilos para el botón flotante de audio */
    #toggle-audio-btn {
      position: fixed; /* Fija el botón en la ventana del navegador */
      bottom: 50%; /* Distancia desde la parte inferior */
      right: 20px; /* Distancia desde la parte derecha */
      background-color: #007bff; /* Color de fondo azul */
      color: white; /* Color del texto/icono */
      border: none; /* Sin borde */
      border-radius: 50%; /* Forma circular */
      width: 50px; /* Ancho del botón */
      height: 50px; /* Altura del botón */
      font-size: 24px; /* Tamaño del icono */
      display: flex; /* Para centrar el icono */
      justify-content: center; /* Centrado horizontal */
      align-items: center; /* Centrado vertical */
      cursor: pointer; /* Cursor de puntero al pasar el ratón */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para efecto flotante */
      transition: background-color 0.3s ease, transform 0.3s ease; /* Transición suave */
      z-index: 1000; /* Asegura que esté por encima de otros elementos */
    }

    #toggle-audio-btn:hover {
      background-color: #0056b3; /* Color de fondo más oscuro al pasar el ratón */
      transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
    }

    /* Estilos para el ícono de audio */
    #toggle-audio-btn .fa {
      margin-right: 0; /* Asegura que no haya margen extra si se usa Font Awesome */
    }