/* Estilos generales */
:root {
  --blue: #007bff; /* Color azul */
  --dark-blue: #0056b3; /* Color azul más oscuro */
  --background-color: #405f80; /* Color de fondo complementario */
  --gold: #cba95c; /* Color dorado */
  --dark-gold: #b59852; /* Color dorado más oscuro */
}

* {
  margin: 0; /* Elimina el margen predeterminado */
  padding: 0; /* Elimina el relleno predeterminado */
  box-sizing: border-box; /* Asegura que el relleno y el borde no aumenten el tamaño total de los elementos */
  font-family: "poppins", sans-serif; /* Fuente predeterminada */
}

/* Estilos de la fuente personalizada */
@font-face {
  font-family: "AirStrike";
  src: url("Fonts/airstrike.ttf") format("truetype");
}

.poppins {
  font-family: "Poppins", system-ui;
  font-weight: 400;
  font-style: normal;
}

/* Estilos del body */
body {
  width: 100%; /* El cuerpo ocupa el 100% del ancho de la pantalla */
  max-width: 1920px; /* Limita el ancho máximo del cuerpo a 1920px */
  height: auto; /* Permite que el cuerpo se ajuste dinámicamente en altura */
  margin: 0 auto; /* Centra el contenido del cuerpo horizontalmente */
  font-family: Arial, sans-serif; /* Define una fuente predeterminada */
  font-size: 14px; /* Establece el tamaño de fuente predeterminado */
  background-color: white; /* Color de fondo */
}

/* Estilos del header */
header {
  display: flex; /* Usa flexbox para organizar el contenido horizontalmente */
  justify-content: space-between; /* Distribuye los elementos con espacio igual entre ellos */
  align-items: center; /* Centra los elementos verticalmente */
  text-align: center; /* Alinea el texto al centro */
  padding: 1rem 2rem; /* Añade espacio interno de 1rem arriba/abajo y 2rem a los lados */
  background-color: black; /* Color de fondo oscuro para el header */
  color: var(--gold); /* Color de texto */
  font-weight: bold; /* Establece el peso de la fuente en negrita */
  width: 100%; /* El header ocupa el 100% del ancho de la pantalla */
  height: 100px; /* Fija la altura del header */
  position: sticky; /* Fija el header en la parte superior de la pantalla */
  overflow: hidden; /* Oculta el contenido que se desborda del contenedor */
}

.header-left {
  display: flex; /* Utiliza flexbox para alinear el contenido dentro de la sección izquierda */
  flex: 1; /* Esta sección ocupa 1 parte de las 3 del header */
  justify-content: flex-start; /* Alinea el contenido a la izquierda */
  margin-top: 15px; /* Añade un pequeño margen superior */
}

.header-left img {
  width: 190px; /* Establece el ancho de la imagen */
  height: 190px; /* Establece la altura de la imagen */
}

.header-center {
  display: flex; /* Utiliza flexbox para organizar los elementos del menú */
  flex: 1; /* Ocupa 1 parte de las 3 del header */
  justify-content: center; /* Alinea el contenido al centro del header */
  align-items: center; /* Centra los elementos verticalmente */
}

.header-center ul {
  display: flex; /* Usa flexbox para que los elementos del menú se dispongan en una fila */
  list-style: none; /* Elimina los puntos de lista predeterminados */
}

.header-center ul li {
  margin: 0; /* Elimina el margen predeterminado de los elementos de la lista */
}

.header-center ul li a {
  padding: 10px 15px; /* Espaciado alrededor del texto */
  border-radius: 5px; /* Esquinas redondeadas */
  transition: background-color 0.3s ease; /* Transición suave para el color de fondo*/
}

.header-center ul li a:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Color de fondo al hacer hover (blanco semitransparente) */
  color: var(--gold); /* Cambia el color del texto al hacer hover */
  border-radius: 5px; /* Esquinas redondeadas */
}

.header-right {
  display: flex; /* Utiliza flexbox para alinear el contenido dentro de la sección derecha */
  flex: 1; /* Ocupa 1 parte de las 3 del header */
  justify-content: flex-end; /* Alinea el contenido a la derecha */
}

a {
  font-size: 16px; /* Tamaño de fuente de 16px */
  color: var(--gold); /* Color de texto blanco para los enlaces */
  text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
}

/* Ajustes para responsividad */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* Cambia la disposición de los elementos a columna en pantallas pequeñas */
    height: auto; /* Permite que el header ajuste su altura automáticamente */
    text-align: left; /* Alinea el texto a la izquierda en pantallas pequeñas */
  }

  .header-left,
  .header-right {
    justify-content: center; /* Alinea los contenidos al centro en pantallas pequeñas */
    margin: 10px 0; /* Añade espacio vertical entre los elementos */
  }

  .header-center ul {
    flex-direction: column; /* El menú se dispone verticalmente en pantallas pequeñas */
    align-items: center; /* Centra los elementos del menú */
  }

  .header-center ul li {
    margin: 10px 0; /* Añade espacio vertical entre los elementos del menú */
  }
}

/* Estilos del main */
main {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  height: 100%; /* Altura del main */
}

section {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  height: auto; /* Ajusta la altura automáticamente */
  min-height: 300px; /* Altura mínima de 300px */
}

section:first-of-type {
  min-height: 400px; /* Aumenta la altura mínima del primer section a 400px */
}

.zoom-container {
  position: relative; /* Establece la posición relativa para los elementos hijos */
  overflow: hidden; /* Oculta el contenido que se desborda del contenedor */
  width: 100%; /* Ancho del contenedor */
  height: 100%; /* Altura del contenedor */
  background-image: url("global.jpg"); /* Imagen de fondo */
  background-size: 100%; /* El tamaño de la imagen será el 100% al principio */
  background-position: center; /* Posición inicial centrada */
  transition:
    background-size 0.2s ease,
    background-position 0.2s ease;
  z-index: 0; /* Coloca el contenedor detrás de otros elementos */
}

.zoom-container div {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  width: 50%; /* Ancho del div */
}

.zoom-container h1,
.zoom-container h2 {
  margin: auto; /* Centra el texto horizontalmente */
  color: white; /* Color de texto blanco */
  font-family: "poppins", sans-serif; /* Fuente personalizada */
  font-size: 50px; /* Tamaño de fuente grande */
  text-align: center; /* Alinea el texto al centro */
}

.middle {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  width: 100%; /* Ancho del contenedor */
  height: 100%; /* Altura del contenedor */
}

.middle h1 {
  color: black; /* Color de texto */
  font-family: "poppins", sans-serif; /* Fuente personalizada */
  font-size: 50px; /* Tamaño de fuente grande */
  margin: 0 auto; /* Centra el texto horizontalmente */
  margin-top: -30px; /* Añade espacio vertical entre los elementos */
  margin-bottom: 20px; /* Añade espacio vertical entre los elementos */
  text-align: center; /* Alinea el texto al centro */
}

.middle-parts {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
  flex: 1; /* Ocupa 1 parte de las 3 del main */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  height: 100%; /* Altura del contenedor */
  font-size: 16px; /* Tamaño de fuente */
}

.middle-parts img {
  width: 100%; /* Ancho de la imagen */
  height: 100%; /* Altura de la imagen */
  object-fit: cover; /* Ajusta la imagen al contenedor */
}

.justify-right {
  text-align: right; /* Alinea el texto a la derecha */
  list-style: none; /* Sin subrayado en el texto */
}

.justify-center {
  text-align: center; /* Alinea el texto a la derecha */
  list-style: none; /* Sin subrayado en el texto */
}

.tittle-bar {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  width: 100%; /* Ancho del contenedor */
  background-color: var(--gold); /* Color de fondo */
}

.tittle-bar h3 {
  color: black; /* Color de texto */
  margin-top: 10px; /* Añade espacio vertical entre los elementos */
  margin-bottom: 5px; /* Añade espacio vertical entre los elementos */
  font-size: 20px; /* Tamaño de fuente grande */
}

.tittle-bar h4 {
  color: black; /* Color de texto */
  margin-top: 5px; /* Añade espacio vertical entre los elementos */
  margin-bottom: 10px; /* Añade espacio vertical entre los elementos */
  font-size: 18px; /* Tamaño de fuente grande */
}

.tittle-bar-mid {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  width: 100%; /* Ancho del contenedor */
  background-color: var(--gold); /* Color de fondo */
  font-size: 16px; /* Tamaño de fuente */
  font-weight: bold; /* Establece el peso de la fuente en negrita */
  padding: 5px 0; /* Añade espacio interno de 15 píxeles arriba/abajo y 0 píxeles a los lados */
}
.tittle-bar-low {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
  width: 100%; /* Ancho del contenedor */
  height: 5px; /* Altura del contenedor */
  background-color: var(--gold); /* Color de fondo */
}

.middle button {
  background-color: var(--gold); /* Color de fondo azul */
  color: black; /* Color de texto blanco */
  padding: 10px 20px; /* Espaciado interno de 10 píxeles arriba/abajo y 20 píxeles a los lados */
  width: auto; /* Ancho automático */
  height: auto; /* Altura automática */
  border-radius: 5px; /* Esquinas redondeadas */
  font-weight: bold; /* Establece el peso de la fuente en negrita */
  cursor: pointer; /* Cambia el cursor a un puntero al pasar sobre el botón */
  transition: scale 0.3s ease; /* Transición suave para el tamaño */
  border: 2px solid var(--gold); /* Borde transparente */
}

.middle button:hover {
  scale: 1.2; /* Aumenta el tamaño del botón al hacer hover */
}

.text-dashboard {
  padding: 0 100px; /* Añade espacio interno de 0 arriba/abajo y 150 píxeles a los lados */
  text-align: justify; /* Alinea el texto justificado */
}

.text-dashboard p {
  margin-bottom: 15px; /* Añade espacio vertical entre los elementos */
}

.extra-left {
  font-size: 27px; /* Tamaño de fuente grande */
  font-style: italic; /* Estilo de fuente cursiva */
  margin-bottom: 10px; /* Añade espacio vertical entre los elementos */
  margin-left: -55px; /* Añade espacio vertical entre los elementos */
  text-align: left; /* Alinea el texto a la derecha */
  width: 35%; /* Ancho del contenedor */
}

.extra-right {
  font-size: 30px; /* Tamaño de fuente grande */
  font-style: italic; /* Estilo de fuente cursiva */
  margin-bottom: 10px; /* Añade espacio vertical entre los elementos */
  text-align: right; /* Alinea el texto a la derecha */
  width: 35%; /* Ancho del contenedor */
}

.maps {
  width: 100%; /* Ancho del contenedor */
}

.maps img {
  width: 100%; /* Ancho de la imagen */
  height: 100%; /* Altura de la imagen */
  object-fit: cover; /* Ajusta la imagen al contenedor */
}

.maps div {
  display: flex; /* Utiliza flexbox para organizar los elementos del menú */
  width: 50%; /* Ancho del div */
}

.maps div h1 {
  margin: auto; /* Centra el texto horizontalmente */
  color: white; /* Color de texto blanco */
  font-family: AirStrike, sans-serif; /* Fuente personalizada */
  font-size: 50px; /* Tamaño de fuente grande */
  filter: drop-shadow(
    5px 5px 5px rgba(0, 0, 0, 0.3)
  ); /* Añade una sombra al texto */
}

/* Estilos de contacto */
.contact-left {
  width: 35%; /* Ancho del contenedor */
  height: 100%; /* Altura del contenedor */
  margin: auto; /* Centra el contenido horizontalmente */
  padding: 50px 0 50px 50px; /* Añade espacio interno */
  position: relative; /* Asegura que el elemento esté en el flujo del documento */
  top: 0; /* Asegura que el elemento esté pegado a la parte superior */
  margin-top: 80px; /* Margen superior */
}

.contact-right {
  width: 65%; /* Ancho del contenedor */
  height: 100%; /* Altura del contenedor */
  margin: auto; /* Centra el contenido horizontalmente */
  padding: 50px; /* Añade espacio interno*/
}

.contact-icon {
  width: 100%; /* Ancho del contenedor */
  min-height: 100px; /* Altura mínima del contenedor */
  height: auto; /* Altura del contenedor */
  margin: auto; /* Centra el contenido horizontalmente */
  background-color: var(--gold); /* Color de fondo */
  color: black; /* Color de texto */
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: row; /* Organiza los elementos en fila */
  justify-content: space-between; /* Distribuye los elementos con espacio igual entre ellos */
  align-items: center; /* Centra los elementos verticalmente */
  border-radius: 10px; /* Esquinas redondeadas */
  margin-bottom: 30px; /* Añade espacio vertical entre los elementos */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Añade una sombra al contenedor */
}

.contact-icon .text-bold {
  padding: 20px; /* Espaciado interno de 20 píxeles */
  font-size: 18px; /* Tamaño de fuente grande */
  font-weight: bold; /* Establece el peso de la fuente en negrita */
}

.contact-icon p {
  margin-right: 15px; /* Añade espacio a la derecha del icono */
}

.contact-info {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  box-sizing: border-box; /* Asegura que el relleno y el borde no aumenten el tamaño total de los elementos */
  background-color: white; /* Color de fondo blanco */
  width: 100%; /* Ancho del contenedor */
  height: 100%; /* Altura del contenedor */
  padding: 50px; /* Añade espacio interno de 50 píxeles */
  border-radius: 20px; /* Esquinas redondeadas */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Añade una sombra al contenedor */
}

.contact-info h1 {
  margin: auto; /* Centra el texto horizontalmente */
  color: black; /* Color de texto blanco */
  font-family: "poppins", sans-serif; /* Fuente personalizada */
  font-size: 42px; /* Tamaño de fuente grande */
  margin-bottom: 30px; /* Añade espacio vertical entre los elementos */
  text-align: center; /* Alinea el texto al centro */
}

.contact-info form {
  width: 100%; /* Ancho del formulario */
  margin: auto; /* Centra el formulario horizontalmente */
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
}

.contact-info form div {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
  margin: auto; /* Centra el input horizontalmente */
  width: 70%; /* Ancho del div */
  margin-bottom: 20px; /* Añade espacio vertical entre los elementos */
}

.contact-info form div input {
  width: 100%; /* Ancho del input */
  padding: 10px; /* Espaciado interno de 10 píxeles */
  border-radius: 5px; /* Esquinas redondeadas */
  margin: auto; /* Centra el input horizontalmente */
}

.contact-info form div input:focus {
  outline: none; /* Quita el estilo de borde por defecto */
  border-color: var(--gold); /* Cambia el color del borde al seleccionar */
}

.vertical {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  flex-direction: column; /* Organiza los elementos en columna */
  align-items: center; /* Centra los elementos verticalmente */
  width: 100%; /* Ancho del contenedor */
  height: 100%; /* Altura del contenedor */
}

.vertical h2 {
  color: black; /* Color de texto */
  font-family: "poppins", sans-serif; /* Fuente personalizada */
  margin-top: 30px; /* Añade espacio vertical entre los elementos */
}

.vertical button {
  margin-top: 50px; /* Añade espacio vertical entre los elementos */
}

.horizontal {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  flex-direction: row; /* Organiza los elementos en fila */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  margin-bottom: 15px; /* Añade espacio vertical entre los elementos */
}

/* Media queries para responsividad de contacto*/
@media (max-width: 1100px) {
  .middle {
    flex-direction: column; /* Organiza los elementos en columna en pantallas pequeñas */
  }
  .contact-left {
    width: 100%; /* Ancho del contenedor */
    height: auto; /* Ajusta la altura automáticamente */
    padding: 20px; /* Añade espacio interno */
  }

  .contact-right {
    width: 100%; /* Ancho del contenedor */
    height: auto; /* Ajusta la altura automáticamente */
    padding: 20px; /* Añade espacio interno */
  }

  .contact-icon {
    width: 100%; /* Ancho del contenedor */
    height: auto; /* Ajusta la altura automáticamente */
    padding: 20px; /* Añade espacio interno */
    margin-bottom: 20px; /* Añade espacio vertical entre los elementos */
  }

  .contact-info {
    width: 100%; /* Ancho del contenedor */
    height: auto; /* Ajusta la altura automáticamente */
    padding: 20px; /* Añade espacio interno */
    margin-bottom: 20px; /* Añade espacio vertical entre los elementos */
  }

  .contact-info h1 {
    font-size: 30px; /* Tamaño de fuente grande */
  }

  .contact-info form div {
    width: 100%; /* Ancho del div */
  }

  .contact-info form div input {
    width: 100%; /* Ancho del input */
  }
}

#button {
  background-color: var(--gold); /* Color de fondo azul */
  color: black; /* Color de texto blanco */
  font-weight: bold; /* Establece el peso de la fuente en negrita */
  cursor: pointer; /* Cambia el cursor a un puntero al pasar sobre el botón */
  width: 30%; /* Ancho del botón */
  margin-top: 10px; /* Añade espacio vertical entre los elementos */
  border: none; /* Sin borde */
  transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
}

#button:hover {
  background-color: var(
    --dark-gold
  ); /* Cambia el color de fondo al hacer hover */
}

.error {
  display: none; /* Oculta el mensaje de error inicialmente */
  width: 100%; /* Ancho del mensaje de error */
  color: red; /* Color de texto rojo */
  font-size: 12px; /* Tamaño de fuente pequeño */
  margin-top: 10px; /* Añade espacio vertical entre los elementos */
  text-align: center; /* Alinea el texto al centro */
}

#resultado {
  width: 100%; /* Ancho del mensaje de error */
  color: green; /* Color de texto verde */
  font-size: 12px; /* Tamaño de fuente pequeño */
  margin-top: 10px; /* Añade espacio vertical entre los elementos */
  text-align: center; /* Alinea el texto al centro */
}

#terms-checkbox {
  width: 10px; /* Ancho del checkbox */
}

/* Ajustes para responsividad */
@media (max-width: 1120px) {
  main {
    flex-direction: column; /* Disposición vertical en pantallas pequeñas */
    align-items: center; /* Centra los elementos horizontalmente */
  }

  section {
    height: auto; /* Ajusta la altura automáticamente */
    min-height: 400px; /* Altura mínima de 300px */
  }

  .zoom-container {
    width: 100%; /* El contenedor ocupa todo el ancho de la pantalla en dispositivos pequeños */
    height: 100%; /* Ajusta la altura para pantallas más pequeñas */
  }

  .contact-info form div {
    width: 100%; /* El contenedor de información de contacto ocupa todo el ancho de la pantalla */
    height: auto; /* Ajusta la altura automáticamente */
  }

  .middle-parts img {
    width: 90%; /* Ancho de la imagen */
    height: 100%; /* Altura de la imagen */
    object-fit: cover; /* Ajusta la imagen al contenedor */
    border-radius: 15px; /* Esquinas redondeadas */
  }
}

/*Estilos del botón de skip (Accesibilidad para saltar al Main)*/
#skip {
  position: absolute; /* Posiciona el elemento de manera absoluta */
  top: 30px; /* A 7 píxeles desde la parte superior del contenedor */
  left: 10px; /* A 200 píxeles hacia la izquierda, fuera de la vista */
  background-color: var(--gold); /* Color de fondo azul */
  color: black; /* Color del texto blanco */
  padding: 10px; /* Espaciado interno de 10 píxeles */
  text-decoration: none; /* Sin subrayado en el texto */
  border-radius: 5px; /* Bordes redondeados de 5 píxeles */
  visibility: hidden; /* El elemento es invisible inicialmente */
  cursor: pointer; /* Cambia el cursor a un puntero al pasar sobre el elemento */
  z-index: 10; /* Coloca el elemento por encima de otros elementos */
}

#skip:focus-visible {
  outline: 2px solid white; /* Añade un contorno blanco al elemento enfocado */
}

/* Estilos del footer */
footer {
  display: flex; /* Usa flexbox para organizar el contenido horizontalmente */
  justify-content: space-evenly; /* Distribuye los elementos con espacio igual entre ellos */
  align-items: center; /* Centra los elementos verticalmente */
  text-align: center; /* Alinea el texto al centro */
  padding: 1rem 2rem; /* Añade espacio interno de 1rem arriba/abajo y 2rem a los lados */
  background-color: black; /* Color de fondo oscuro para el footer */
  color: var(--gold); /* Color de texto blanco */
  font-weight: bold; /* Establece el peso de la fuente en negrita */
  width: 100%; /* El footer ocupa el 100% del ancho de la pantalla */
  height: 50px; /* Fija la altura del footer */
}

.footer-content {
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
}

.footer-content p {
  margin-left: 10px; /* Añade espacio a la izquierda del texto */
}

.footer-content a {
  color: var(--gold); /* Color de texto para los enlaces */
  text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
  transition: all 0.3s ease; /* Transición suave para el tamaño */
}

.footer-content a:hover {
  transform: scale(1.1); /* Aumenta el tamaño del texto al hacer hover */
  transition: all 0.3s ease; /* Transición suave para el tamaño */
}

#top-btn {
  position: fixed; /* Fija el botón en la pantalla */
  bottom: 20px; /* A 20 píxeles desde la parte inferior */
  right: 20px; /* A 20 píxeles desde la parte derecha */
  cursor: pointer;
  border-radius: 50%; /* Bordes redondeados */
  background-color: white; /* Cambia el color de fondo al hacer hover */
  transition: scale 0.3s ease; /* Transición suave para el tamaño */
}

#top-btn:hover {
  scale: 1.2; /* Aumenta el tamaño del botón al hacer hover */
}

/* Estilos del login para admins */
.login {
  height: 100%; /* Altura del 100% del viewport */
  display: flex; /* Utiliza flexbox para organizar el contenido horizontalmente */
  justify-content: center; /* Alinea el contenido al centro horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  margin: 20px auto; /* Añade espacio vertical entre los elementos */
}

.formulario {
  width: 90%; /* Ancho del formulario */
  background-color: white; /* Color de fondo blanco */
  border-radius: 10px; /* Esquinas redondeadas */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Añade una sombra al formulario */
  padding: 50px; /* Añade espacio interno de 50 píxeles */
  text-align: center; /* Alinea el texto al centro */
}

.formulario h1 {
  margin-top: -20px; /* Añade espacio vertical entre los elementos */
  color: var(--blue); /* Color de texto azul */
  margin-bottom: 20px; /* Añade espacio vertical entre los elementos */
}

.formulario label {
  display: block; /* Muestra el texto en una línea separada */
  text-align: left; /* Alinea el texto a la izquierda */
}

.formulario form input {
  width: 100%; /* Ancho del input */
  padding: 10px; /* Espaciado interno de 10 píxeles */
  border-radius: 5px; /* Esquinas redondeadas */
  margin: auto; /* Centra el input horizontalmente */
  margin-bottom: 20px; /* Añade espacio vertical entre los elementos */
}

.formulario form input:focus {
  outline: none; /* Quita el estilo de borde por defecto */
  border-color: var(--blue); /* Cambia el color del borde al seleccionar */
}

.formulario form #button {
  width: 50%; /* Ancho del botón */
  margin-bottom: -20px; /* Añade espacio vertical entre los elementos */
}

/*Estilos de las tarjetas de datos de los usuarios (admins)*/
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card-title {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
  text-transform: capitalize;
}

.card-content {
  color: black;
  line-height: 1.6;
}

.card-content p {
  color: #666;
  margin-top: 10px;
  text-decoration: underline;
  font-style: italic;
}

.card-footer {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  color: #888;
  font-size: 0.9em;
}

@media (max-width: 600px) {
  .cards-container {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

/* Estilos para la sección de imágenes */
.imagenes-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 3rem 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.imagenes-section h1 {
  text-align: center;
  color: var(--background-color);
  margin-bottom: 1rem;
  margin-top: 0;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.imagenes-section h2 {
  color: var(--background-color);
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

/* Formulario para agregar imágenes */
.formulario-imagenes {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 3rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--background-color);
  font-weight: 600;
  font-size: 1rem;
}

.form-group input[type="text"],
.form-group input[type="file"],
.form-group textarea {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid var(--gold);
  border-radius: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="file"]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--dark-gold);
  box-shadow: 0 0 5px rgba(203, 169, 92, 0.3);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group small {
  display: block;
  margin-top: 0.5rem;
  color: #666;
  font-size: 0.85rem;
}

.btn-agregar {
  background-color: var(--gold);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-agregar:hover {
  background-color: var(--dark-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-agregar:active {
  transform: translateY(0);
}

/* Mensajes de éxito y error */
.mensaje {
  padding: 1rem;
  border-radius: 5px;
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 600;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mensaje.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.mensaje.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Galería de imágenes */
.galeria-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.imagen-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  background: white;
}

.imagen-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 100%;
  border: 0;
  background: transparent;
  display: block;
  cursor: zoom-in;
}

.imagen-galeria {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.imagen-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  color: white;
  display: flex;
  justify-content: flex-end;
  text-align: left;
  opacity: 0.95;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.imagen-overlay h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.imagen-overlay p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.4;
  word-wrap: break-word;
}

.imagen-wrapper:hover .imagen-galeria,
.imagen-wrapper:focus-visible .imagen-galeria {
  transform: scale(1.05);
}

.imagen-wrapper:hover .imagen-overlay,
.imagen-wrapper:focus-visible .imagen-overlay {
  opacity: 1;
}

.imagen-wrapper:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.btn-eliminar {
  background-color: #dc3545;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-eliminar:hover {
  background-color: #c82333;
  transform: scale(1.05);
}

.btn-eliminar:active {
  transform: scale(0.98);
}

.sin-imagenes {
  text-align: center;
  font-size: 1.2rem;
  color: #999;
  padding: 3rem;
}

/* Paginación */
.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.pagina-link,
.pagina-actual {
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.pagina-link {
  background-color: white;
  color: var(--background-color);
  border: 1px solid rgba(64, 95, 128, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease, border-color 0.2s ease;
}

.pagina-link:hover {
  background-color: var(--background-color);
  color: white;
  border-color: var(--background-color);
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
}

.pagina-link:active {
  transform: translateY(0);
}

.pagina-actual {
  background-color: var(--gold);
  color: #101010;
  border: 1px solid var(--gold);
  box-shadow: 0 6px 10px rgba(203, 169, 92, 0.35);
}

.pagina-puntos {
  color: #777;
  font-weight: bold;
  padding: 0 0.2rem;
}

.info-paginacion {
  text-align: center;
  color: #555;
  font-size: 0.95rem;
  margin-top: 1rem;
}

/* Lightbox de galería */
body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.lightbox.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(2px);
}

.lightbox-content {
  position: relative;
  z-index: 1;
  width: min(92vw, 1100px);
  max-height: 92vh;
  padding: 0.5rem;
}

.lightbox-image {
  width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  background: #111;
}

.lightbox-close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #222;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.lightbox-close:hover {
  transform: scale(1.06);
}

/* Responsive */
@media (max-width: 1024px) {
  .galeria-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .imagenes-section {
    padding: 2rem 1rem;
  }

  .imagenes-section h1 {
    font-size: 2rem;
  }

  .imagenes-section h2 {
    font-size: 1.5rem;
  }

  .formulario-imagenes {
    padding: 1.5rem;
  }

  .galeria-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .btn-agregar {
    width: 100%;
  }

  .paginacion {
    gap: 0.3rem;
  }

  .pagina-link,
  .pagina-actual {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
  }

  .lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
  }
}

@media (max-width: 480px) {
  .imagenes-section h1 {
    font-size: 1.5rem;
  }

  .imagenes-section h2 {
    font-size: 1.2rem;
  }

  .galeria-container {
    grid-template-columns: 1fr;
  }

  .formulario-imagenes {
    padding: 1rem;
  }

  .paginacion {
    gap: 0.2rem;
  }

  .pagina-link,
  .pagina-actual {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }

  .imagen-overlay {
    padding: 1rem;
  }

  .imagen-overlay h3 {
    font-size: 1.1rem;
  }

  .imagen-overlay p {
    font-size: 0.85rem;
  }
}

/* ======================== ESTILOS DEL PANEL DE ADMINISTRACIÓN ======================== */

.admin-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0;
}

.admin-header {
  background: linear-gradient(
    135deg,
    var(--background-color),
    var(--dark-blue)
  );
  color: white;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.admin-header h1 {
  margin: 0;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.btn-logout {
  background-color: #dc3545;
  color: white;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-logout:hover {
  background-color: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-logout:active {
  transform: translateY(0);
}

/* Tabs de navegación */
.admin-tabs {
  display: flex;
  gap: 1rem;
  background-color: white;
  padding: 1rem 2rem;
  border-bottom: 2px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
}

.tab-btn {
  padding: 0.8rem 1.5rem;
  border: 2px solid transparent;
  background-color: transparent;
  color: var(--background-color);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  border-radius: 5px 5px 0 0;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tab-btn:hover {
  background-color: #f0f0f0;
  border-bottom-color: var(--gold);
}

.tab-btn.active {
  background-color: var(--gold);
  color: white;
  border-bottom-color: var(--dark-gold);
}

/* Contenido del admin */
.admin-content {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-content h2 {
  color: var(--background-color);
  margin-bottom: 2rem;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-content h3 {
  color: var(--background-color);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

/* Formulario de imágenes en admin */
.formulario-imagenes-admin {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.formulario-imagenes-admin h3 {
  margin-top: 0;
  color: var(--background-color);
}

.formulario-imagenes-admin .form-group {
  margin-bottom: 1.5rem;
}

.formulario-imagenes-admin label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--background-color);
  font-weight: 600;
  font-size: 1rem;
}

.formulario-imagenes-admin input[type="file"] {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid var(--gold);
  border-radius: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
}

.formulario-imagenes-admin input[type="file"]:focus {
  outline: none;
  border-color: var(--dark-gold);
  box-shadow: 0 0 5px rgba(203, 169, 92, 0.3);
}

.formulario-imagenes-admin small {
  display: block;
  margin-top: 0.5rem;
  color: #666;
  font-size: 0.85rem;
}

/* Galería en admin */
.galeria-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.imagen-admin-item {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.imagen-admin-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.imagen-admin-preview {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: #f0f0f0;
}

.imagen-admin-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.imagen-admin-item:hover .imagen-admin-preview img {
  transform: scale(1.05);
}

.imagen-admin-info {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.imagen-admin-info p {
  margin: 0.5rem 0;
  color: #333;
  font-size: 0.95rem;
}

.imagen-admin-info strong {
  color: var(--background-color);
  font-weight: 600;
}

.btn-eliminar-admin {
  background-color: #dc3545;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: flex-start;
}

.btn-eliminar-admin:hover {
  background-color: #c82333;
  transform: scale(1.05);
}

.btn-eliminar-admin:active {
  transform: scale(0.98);
}

/* Responsive para admin */
@media (max-width: 768px) {
  .admin-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .admin-header h1 {
    font-size: 1.5rem;
  }

  .admin-tabs {
    padding: 1rem;
  }

  .tab-btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  .admin-content {
    padding: 1rem;
  }

  .admin-content h2 {
    font-size: 1.5rem;
  }

  .galeria-admin {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }

  .imagen-admin-preview {
    height: 200px;
  }

  .formulario-imagenes-admin {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .admin-header h1 {
    font-size: 1.2rem;
  }

  .btn-logout {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .admin-tabs {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .tab-btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }

  .galeria-admin {
    grid-template-columns: 1fr;
  }

  .admin-content {
    padding: 0.5rem;
  }

  .admin-content h2 {
    font-size: 1.3rem;
  }

  .admin-content h3 {
    font-size: 1.1rem;
  }
}

/* ======================== RESPONSIVE GLOBAL REFACTOR ======================== */

main,
section {
  width: 100%;
}

img,
iframe {
  max-width: 100%;
}

/* Compatibilidad básica para la página de política */
main > p {
  width: 100%;
  margin: 0;
}

.row {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.col-xl-10.mx-auto {
  width: 100%;
}

.paper {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.paper ul {
  padding-left: 1.25rem;
}

.paper h2,
.paper h3,
.paper h4 {
  margin-bottom: 0.6rem;
}

@media (max-width: 1280px) {
  header {
    padding: 0.75rem 1.25rem;
  }

  .header-left img {
    width: 160px;
    height: auto;
  }

  .header-center ul li a {
    padding: 8px 10px;
  }

  .middle h1 {
    font-size: 2.25rem;
    margin-top: 0;
  }

  .text-dashboard {
    padding: 0 2.5rem;
  }

  .extra-left,
  .extra-right {
    width: 100%;
    margin-left: 0;
    text-align: left;
    font-size: 1.8rem;
  }
}

@media (max-width: 1024px) {
  header {
    height: auto;
    min-height: 100px;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .header-left,
  .header-center,
  .header-right {
    flex: 1 1 100%;
    justify-content: center;
    margin-top: 0;
  }

  .header-center ul {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .middle {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .middle > .middle-parts {
    flex: 1 1 calc(50% - 1rem);
    min-width: 280px;
    padding: 1rem;
  }

  .middle-parts img {
    border-radius: 14px;
  }

  .maps {
    display: grid;
    grid-template-columns: 1fr;
  }

  .maps div {
    width: 100%;
  }

  .maps iframe {
    min-height: 320px;
  }

  .contact-left,
  .contact-right {
    width: 100%;
    padding: 1.25rem;
    margin-top: 0;
  }

  .contact-info h1 {
    font-size: 2rem;
  }

  footer {
    flex-wrap: wrap;
    height: auto;
    min-height: 50px;
    gap: 0.5rem 1.25rem;
    padding: 0.8rem 1rem;
  }
}

@media (max-width: 768px) {
  header {
    position: static;
    align-items: center;
  }

  .header-left img {
    width: 130px;
  }

  .header-center ul {
    flex-direction: row;
  }

  .header-right a i {
    font-size: 30px !important;
    margin-right: 8px !important;
  }

  .middle {
    flex-direction: column;
    align-items: stretch;
  }

  .middle > .middle-parts {
    flex: 1 1 100%;
    min-width: 100%;
    padding: 0.75rem 1rem;
  }

  .middle h1 {
    font-size: 1.9rem;
    margin-bottom: 1rem;
  }

  .text-dashboard {
    padding: 0 1rem;
    font-size: 0.98rem;
  }

  .middle ul,
  .justify-center,
  .justify-right {
    text-align: left;
    padding-left: 1.15rem;
  }

  .contact-icon {
    gap: 0.75rem;
    padding: 1rem;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }

  .contact-icon p {
    margin-right: 0;
  }

  .horizontal {
    flex-direction: column;
    gap: 0.6rem;
  }

  .contact-info {
    padding: 1.25rem;
  }

  .contact-info h1 {
    font-size: 1.65rem;
  }

  .contact-info h2 {
    font-size: 1.25rem;
  }

  .imagenes-section {
    padding: 1.5rem 0.9rem;
  }

  .lightbox-content {
    width: min(96vw, 900px);
    padding: 0.35rem;
  }

  .formulario {
    width: min(94%, 560px);
    padding: 1.25rem;
  }

  .formulario form #button {
    width: 100%;
  }
}

@media (max-width: 576px) {
  a {
    font-size: 0.95rem;
  }

  .header-center ul li a {
    padding: 6px 8px;
  }

  .zoom-container {
    min-height: 260px;
  }

  .maps iframe {
    min-height: 260px;
  }

  .info-paginacion {
    font-size: 0.85rem;
  }

  .paper {
    padding: 1rem;
  }

  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-content {
    width: 100%;
    justify-content: center;
  }

  #top-btn {
    right: 12px;
    bottom: 12px;
    width: 42px;
    height: 42px;
  }

  .admin-tabs {
    padding: 0.6rem;
  }

  .tab-btn {
    width: 100%;
    text-align: center;
    border-radius: 8px;
  }
}