/* Fondo de la página */
body {
    background-image: url(https://images.unsplash.com/photo-1719228324632-39312a4cd1fd?q=80&w=1856&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D.jpg);
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
}


/* Fondo para la página /cumple */
body.cumple {
    background-image: url('/img/imagenes_fondo/Cumpleaños.png');
    background-size: cover;
    background-position: center;
}


/* Contenedor principal */
.cuerpo {
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    margin: 20px auto;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    max-width: 800px;
}

/* Estilo y posición para el botón de enlace a "Cumpleaños" */
.link-cumple-button {
    position: fixed; /* Posición fija para mantener el botón siempre visible */
    top: 20px; /* Posiciona el botón a 20px del borde superior */
    right: 20px; /* Posiciona el botón a 20px del borde derecho */
    background-color: #f39c12; /* Fondo naranja */
    color: #fff; /* Color del texto blanco */
    padding: 10px 20px; /* Añade relleno para dar tamaño al botón */
    font-size: 16px; /* Ajusta el tamaño de fuente */
    text-decoration: none; /* Quita el subrayado del enlace */
    border-radius: 5px; /* Redondea las esquinas */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Añade una sombra para hacer el botón más visible */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transición suave al hacer hover */
}

/* Hover para el botón */
.link-cumple-button:hover {
    background-color: #e67e22; /* Cambia a un tono más oscuro al pasar el ratón */
    transform: scale(1.05); /* Agranda ligeramente el botón al hacer hover */
}


/* Estilo para el botón de "Conseguir entrada QR" */
.textoBoton {
    background-color: rgb(9, 136, 69);
    font-size: 16px; /* Ajusta el tamaño de fuente según sea necesario */
    color: white !important; /* Forzar el texto en blanco */
    text-align: center;
    display: block;
    margin: 15px auto;
    padding: 12px 20px; /* Espaciado interno para un tamaño de botón más grande */
    border: 2px solid white; /* Añadir borde blanco para mejorar el contraste */
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Añadir sombra para destacar el botón */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transition: transform 0.2s, box-shadow 0.2s; /* Efecto de transición para mejorar la interacción */
}

.textoBoton:hover {
    transform: scale(1.05); /* Efecto de hover para agrandar el botón ligeramente */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); /* Aumentar la sombra al pasar el ratón */
}

/* Estilo para textos generales dentro del contenedor principal */
.cuerpo p,
.event-details p {
    font-size: 16px;
    line-height: 22px;
    color: #333;
    font-weight: 700;
    text-transform: capitalize;
    margin: 5px 0;
}

/* Estilos de encabezados */
.header-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.event-title-large {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.discoteca-title {
    font-family: 'Arial Black', sans-serif;
    font-weight: bold;
    font-size: 40px;
    text-align: left;

    background: linear-gradient(90deg, #FFD700, #FFAA00, #FFD700); /* Degradado dorado */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 
        0 1px 0 rgba(255, 215, 0, 0.7),  /* Sombra más ligera */
        0 2px 0 rgba(255, 165, 0, 0.5),  /* Sombra intermedia */
        0 3px 0 rgba(255, 140, 0, 0.4),  /* Más profundidad */
        0 4px 0 rgba(0, 0, 0, 0.2), 
        0 5px 5px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.2);
}


.event-title-large {
    color: #f39c12;
}

/* Contenedor del Código QR y la Información del Titular */
.qr-info-container {
    display: flex;
    align-items: flex-start; /* Alinear elementos al inicio verticalmente */
    justify-content: flex-start; /* Mantener el QR a la izquierda y la info a la derecha */
    margin: 20px auto;
    max-width: 800px;
}

/* Contenedor del Código QR */
.qr-container {
    flex: 1;
    text-align: center;
}

/* Ajustes de tamaño del Código QR */
.qr-code-large {
    width: 200px;
    height: auto;
    margin: 0 auto;
}

/* Contenedor de Información del Titular */
.info-container {
    flex: 2;
    text-align: left;
    font-size: 16px;
    line-height: 1.2;
}

/* Título "TITULAR" */
.titular-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #343a40;
}

/* Estilo para el separador */
.separator1 {
    width: 100%;
    height: 5px;
    background-image: radial-gradient(circle at 114.09% 79.88%, #ffff8d 0, #ffea82 16.67%, #eed077 33.33%, #d8b46c 50%, #c09a62 66.67%, #a98359 83.33%, #947051 100%);
    margin: 15px 0;
    border: none;
}


.separator2 {
    width: 100%;
    height: 10px; /* Podrías reducir el grosor del separador si es necesario */
    background-image: radial-gradient(circle at 114.09% 79.88%, #ffff8d 0, #ffea82 16.67%, #eed077 33.33%, #d8b46c 50%, #c09a62 66.67%, #a98359 83.33%, #947051 100%);
    margin: 5px 0; /* Ajustar márgenes para reducir el espacio alrededor */
    border: none;
}

/* Estilo para detalles del evento */
.event-details-large{
    font-size: 16px;
    line-height: 1.6;
    margin: 10px 0;
    text-align: center;
}



/* Estilo del texto de confirmación de asistencia */
.confirmation-text {
    font-size: 16px;
    color: #333;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    text-align: center;
}

.confirmation-section {
    text-align: center; /* Esta regla hará que el texto y el botón se alineen al centro horizontalmente */
}

/* Botón para confirmar asistencia */
.confirm-button {
    background-color: #28a745;
    color: #fff !important;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}
.confirm-button:hover {
    background-color: #218838;
}

/* Formato de video */
.video-evento {
    max-width: 95%;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 0 auto 20px;
    display: block;
}

.imagen-evento {
  width: 100%;
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Elimina cualquier espacio en línea debajo de la imagen */
  object-fit: cover; /* Asegura que la imagen cubra su contenedor si es necesario */
}


/* Zona General */
.zone-section {
    text-align: center;
    margin: 5px 0; /* Ajustar el margen superior e inferior */
    padding: 0; /* Asegúrate de que no haya padding que esté incrementando el espacio */
}

h5 {
    margin: 0; /* Eliminar el margen predeterminado del encabezado */
}


.Titulo-Zona {
    font-size: 50px;
    font-family: Arial Black;
    text-align: center;
    font-weight: bold;
    color: #343a40;
    margin: 0px 0; /* Reducir los márgenes superior e inferior */
     text-shadow: 
        0 1px 0 rgba(255, 215, 0, 0.7),  /* Sombra más ligera */
        0 2px 0 rgba(255, 165, 0, 0.5),  /* Sombra intermedia */
        0 3px 0 rgba(255, 140, 0, 0.4),  /* Más profundidad */
        0 4px 0 rgba(0, 0, 0, 0.2), 
        0 5px 5px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.2);
}

/* Información Importante */
.important-section {
    max-width: 800px;
    margin: 0 auto; /* Centrar el contenedor dentro de la página */
    text-align: center; /* Alinear el título al centro */
}

.Titulo-Importante {
    font-size: 30px;
    font-family: Calibri, sans-serif;
    font-weight: bold;
    color: #343a40;
    margin-bottom: 10px; /* Añadir un poco de margen inferior para separar del texto */
     text-shadow: 
        0 1px 0 rgba(255, 215, 0, 0.7),  /* Sombra más ligera */
        0 2px 0 rgba(255, 165, 0, 0.5),  /* Sombra intermedia */
        0 3px 0 rgba(255, 140, 0, 0.4),  /* Más profundidad */
        0 4px 0 rgba(0, 0, 0, 0.2), 
        0 5px 5px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.2);
}

.important-text {
    font-size: 12px;
    font-family: Calibri, sans-serif;
    line-height: 1.2 !important;
    color: #333;
margin: 0 auto; /* Centra el bloque de texto dentro del contenedor */
    text-align: center ; /* Justifica el texto */
    padding: 0 20px; /* Añadir un pequeño padding para un mejor espacio de lectura */
}



/* Botón de descarga */
.download-button {
    font-size: 14px;
    color: white !important;
    text-align: center;
    display: block;
    margin: 15px auto;
    padding: 12px 20px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.download-button:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
}

/* Estilo responsivo para dispositivos más pequeños */
@media (max-width: 768px) {
    .cuerpo {
        width: 90%;
        margin: 10px auto;
    }

    .qr-info-container {
        flex-direction: column; /* Colocar elementos uno debajo del otro en pantallas pequeñas */
        align-items: center; /* Centrar el contenido en pantallas pequeñas */
    }

    .download-button {
        width: 100%;
        font-size: 12px;
    }
}