.password-prompt {
    text-align: center;
    padding: 20px;
    display: block;
  }

.mainpage{
    display: none;
}
  
input {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

/* Elimina márgenes y padding predeterminados en el body y html */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif; /* Aplicamos la fuente Poppins a todo el documento */
    height: 100%;
}

/* Estilos generales del header */
header {
    position: relative;
    width: 100%;
}

/* Contenedor de la imagen */
.imagen-container {
    position: relative;
    width: 100%;
    background-image: url('imagen.jpg'); /* Ruta local de la imagen */
    background-size: cover;
    background-position: center;
    padding-top: 56.25%; /* Mantiene una relación de aspecto 16:9 */
}

/* Estilos del botón (fijo en la esquina superior derecha) */
.boton-header {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #333;
    border: 3px solid #333;
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    transition: background-color 0.3s ease;
    z-index: 10;
}

/* Estilo al poner el cursor sobre el botón */
.boton-header:hover {
    background-color: #fff;
    color: #333;
}

/* Estilo al hacer click en el botón */
.boton-header:active {
    background-color: #fff;
    color: #333;
}

/* Estilos para la sección de texto debajo de la imagen */
.contenido {
    padding: 40px 20px; /* Espaciado alrededor del contenido */
    background-color: #f4f4f4; /* Color de fondo del contenido */
    text-align: center; /* Centrado del texto */
}

/* Título de la sección */
.titulo-seccion {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem; /* Tamaño grande para el título */
    color: #333; /* Color oscuro para el título */
    font-weight: 600; /* Grosor de la fuente */
    margin-bottom: 30px; /* Espacio debajo del título */

}

/* Texto normal de la sección */
.texto-seccion {
    font-size: 1.1rem; /* Tamaño de fuente más pequeño para el texto */
    color: #666; /* Color gris oscuro para el texto */
    line-height: 1.6; /* Espaciado entre líneas */
    max-width: 800px; /* Ancho máximo para evitar que el texto se extienda demasiado */
    margin: 0 auto; /* Centrar el texto */
    margin-bottom: 10px;
    text-align: justify; /* Alinea el texto a la izquierda */

}

/* Contenedor principal de la línea de tiempo */
.timeline-container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 70%;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: center;
    margin: 0 auto; /* Centrar el texto */
    top: 20px;
  }
  
  /* Línea central continua con espacio al inicio y final */
  .timeline-container::before {
    content: '';
    position: absolute;
    top: 20px; /* Espacio desde la parte superior */
    bottom: 20px; /* Espacio desde la parte inferior */
    left: 50%;
    width: 2px;
    background-color: #333;
    transform: translateX(-50%);
    z-index: 0;
  }
  
  /* Elementos de la línea de tiempo */
  .timeline-item {
    display: flex;
    align-items: center; /* Centra todo verticalmente */
    position: relative;
    margin: 20px 0; /* Menor separación entre los puntos */
  }
  
  /* Contenido del lado izquierdo y derecho */
  .event-left, .event-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea el contenido más cerca de la línea */
    position: relative;
    z-index: 1; /* Asegura que el contenido quede sobre la línea */
    gap: 5px; /* Menor espacio entre los elementos */
    padding-right: 30px; /* Ajusta la distancia hacia la línea */
    padding-left: 30px; /* Ajusta la distancia hacia la línea */
  }
  
  .event-right {
    align-items: flex-start; /* Para el lado derecho, alinea cerca de la línea */
    padding-left: 20px; /* Ajusta la distancia hacia la línea */
  }
  
  /* Iconos e imágenes */
  .event-left img, .event-right img {
    width: 50px;
    height: 50px;
  }
  
  .event-time {
    font-size: 14px;
    color: #333;
    margin: 0;
    font-weight: bold;
  }
  
  .event-title {
    font-size: 16px;
    color: #555;
    margin: 0;
  }
  
  /* Puntos en la línea */
  .line-point {
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

.google-map {
    width: 100%; /* Ocupa todo el ancho disponible */
}

iframe {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 100%; /* Ocupa toda la altura del contenedor */
    border: none; /* Elimina el borde del iframe */
}

/* Estilo para la sección de Google Calendar */
.calendar-section {
    margin-top: 40px;
    text-align: center;
}

.calendar-btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: transparent; /* Rojo de Google Calendar */
    color: #333;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: 3px solid #333;
}

.confirmacion-btn {
    display: inline-block;
    padding: 20px 50px;
    background-color: #333; /* Rojo de Google Calendar */
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: 3px solid #333;
}

.contrasena-btn {
    display: inline-block;
    padding: 20x 30px;
    background-color: #333; /* Rojo de Google Calendar */
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: 3px solid #333;
}

.confirmacion-btn:hover {
    background-color: #fff; 
    color: #333;
}

.calendar-btn:hover {
    background-color: #333;
    color: #fff;
}

.calendar-section h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

/* Contenedor de las fotos */
.photo-container {
    display: flex;
    justify-content: space-between; /* Espacio uniforme entre las imágenes */
    gap: 10px; /* Espacio entre las imágenes */
    width: 100%; /* Ancho del contenedor de fotos */
}

/* Estilo de las fotos */
.photo {
    width: 48%; /* Ancho de las imágenes (ajustable según el tamaño deseado) */
    height: auto;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para darle un efecto flotante */
}

a {
    text-decoration: underline; /* Subrayado para el enlace */
    color: inherit; /* Hereda el color del texto circundante */
    font-family: inherit; /* Hereda la fuente del texto circundante */
    font-size: inherit; /* Hereda el tamaño de fuente del texto circundante */
    font-weight: inherit; /* Hereda el grosor del texto */
}

/* Opcional: añadir un efecto al pasar el ratón */
a:hover {
    text-decoration: none; /* Elimina el subrayado al pasar el cursor, opcional */
}

.imagen-final {
    position: relative;
    width: 100%;
    bottom: 0;
    display: block; /* Elimina espacio alrededor de imágenes */
}

.footer {
    background-color: #333; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    text-align: center; /* Centra el texto */
    padding: 20px 0; /* Espacio arriba y abajo del footer */
    left: 0;
    bottom: 0;
    width: 100%; /* Asegura que el footer ocupe todo el ancho */
    top: 0;
}

.footer p {
    margin: 0; /* Elimina márgenes en el párrafo */
    font-size: 14px; /* Tamaño de fuente ajustable */
}