@charset "utf-8";
/* CSS Document */
.modal {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 5000;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	
	animation: modal 1s 2s forwards;
	visibility: hidden;
	opacity: 0;
}

.contenido {
	text-align: center;
	z-index: 1000;
	margin: auto;
	width: 60%;
	height: Auto;
	background: white;
	border-radius: 10px;
}

.tabla {
	width: 100%;
	height: 40%;
	margin-top: 20px;
	margin-bottom: 20px;
	align-content: center;
	align-items: center;
	background-image:url("../img/fondo diseño.png");
    border: 5px outset;
	border-color:crimson;
}

.tabla2 {
	margin-top: 5px;
	margin-bottom: 5px;
}


/* Estilos personalizados para evitar conflictos */
    .n7pWZtq3-container {
      width: 100%; /* Ocupa todo el ancho disponible */
      padding: 0;  /* Sin márgenes visibles */
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* Estilo para el título */
    .n7pWZtq3-title {
      font-size: 2em;
      font-weight: 700; /* Título más grueso */
      text-align: center;
    }

    /* Estilo para el texto */
    .n7pWZtq3-text {
      font-size: 1em;
      text-align: justify;
      width: 90%; /* Ajuste para evitar que el texto se vea muy apretado */
    }

    /* Adaptabilidad en dispositivos móviles */
    @media (max-width: 768px) {
      .n7pWZtq3-text {
        width: 95%; /* Aumenta el ancho del texto en pantallas pequeñas */
      }
    }

/* Contenedor principal que ocupa todo el ancho */
    .q8X2Lp-container {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap; /* Permite que las columnas se reorganicen */
      align-items: stretch; /* Ambas columnas ocupan la misma altura */
    }

    /* Estilo de las columnas */
    .q8X2Lp-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    /* Título en la primera columna */
    .q8X2Lp-title {
      font-size: 2em;
      font-weight: 700;
      text-align: center;
    }

    /* Texto en la primera columna */
    .q8X2Lp-text {
      font-size: 1em;
      text-align: justify;
      width: 90%; /* Para evitar que el texto se vea demasiado estrecho */
    }

    /* Imagen en la segunda columna */
    .q8X2Lp-image {
      width: 80%; /* La imagen ocupa todo el ancho de la columna */
      height: auto;
      object-fit: cover; /* Ajuste proporcional de la imagen */
    }

    /* Adaptabilidad: en pantallas pequeñas, las columnas se apilan */
    @media (max-width: 768px) {
      .q8X2Lp-container {
        flex-direction: column; /* Las columnas pasan a estar una debajo de la otra */
      }

      .q8X2Lp-text {
        width: 95%; /* Aumenta el ancho del texto en pantallas pequeñas */
      }
    }



/* Contenedor principal */
    .aX8Jx-container {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap; /* Permite que las columnas se apilen en pantallas pequeñas */
      align-items: stretch;
    }

    /* Estilos para las columnas */
    .aX8Jx-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    /* Estilos para los títulos */
    .aX8Jx-title {
      font-size: 1.8em;
      font-weight: 700;
      text-align: center;
    }

    /* Estilos para el texto */
    .aX8Jx-text {
      font-size: 1em;
      text-align: justify;
      width: 90%;
    }

    /* Estilo para la imagen */
    .aX8Jx-image {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    /* Adaptabilidad para pantallas pequeñas */
    @media (max-width: 768px) {
      .aX8Jx-container {
        flex-direction: column; /* Apila las columnas verticalmente */
      }

      .aX8Jx-text {
        width: 95%; /* Aumenta el ancho del texto para mejor lectura */
      }
    }


.galactic-void {
  width: 100%;
  height: 35vh; /* Ajusta la altura como lo desees */
  background-image: url("../img/Fondo tarjetas.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container {
  width: 60%; /* Ajusta el porcentaje según el tamaño deseado */
  height: 80%; /* Ajusta la altura según lo que necesites */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  width: 40%;
  height: auto;
  border-radius: 10px; /* Opcional, para redondear los bordes */
}






/* Contenedor principal de los botones */
.nebula-frame {
  background: linear-gradient(to bottom, #856043, #a47d14);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Cambié a columna para apilar los elementos */
  padding: 0 0 2rem;
  position: relative;
  z-index: 1; /* Asegura que nebula-frame esté debajo de image-container */
}


/* Aseguramos que cosmic-orb se apile debajo de image-container */
.cosmic-orb {
  background: #FFFFFF;
  box-shadow: 0 5px 20px rgba(133, 96, 67, 0.35);
  border-radius: 20px;
  padding: 2rem;
  width: 80%;
  max-width: 400px;
  min-width: 320px;
  text-align: center;
  margin-top: 2rem; /* Separación entre los dos contenedores */
  z-index: 1; /* Asegura que cosmic-orb esté debajo de image-container */
}


.stellar-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.galaxy-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(133, 96, 67, 0.9);
  border: 2px solid #ffffff;
  border-radius: 15px;
  padding: 0.60rem 1rem;
  width: 100%;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
  position: relative;
}

.galaxy-trigger img {
  width: 20%;
  margin-right: 1rem;
  border-radius: 10px;
}

.galaxy-trigger span {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.galaxy-trigger:hover {
  transform: translateY(-3px);
  background: rgba(0, 0, 0, 0.9);
}

.galaxy-trigger:active {
  transform: translateY(1px);
}

.galaxy-trigger a {
  text-decoration: none; /* Quita el subrayado del enlace */
  color: inherit; /* Hereda el color del botón */
  display: flex; /* Para alinear el contenido como en el botón */
  align-items: center;
  justify-content: center;
  width: 100%; /* Hace que el enlace ocupe todo el botón */
  height: 100%; /* Coincide con la altura del botón */
}

.galaxy-trigger a img {
  margin-right: 1rem; /* Mantiene el espaciado con el texto */
}



/* 
.contenedor{
    width: 90%;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	align-content: center;
	align-items: center;
	background-image:url("../img/fondo diseño.png");
    border: 5px outset;
	border-color:crimson;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
    text-align: center;
    display: flex;
}

.columna{
	position: relative;
    margin: 0 auto;
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px;
}
*/
	/* borde degradado 
	border: 5px solid transparent;
	border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) 1;
*/	

#cerrar {
	display: none;
}

#cerrar + label {
	text-align: center;
	position: fixed;
	color: #fff;
	font-size: 25px;
	z-index: 5001;
	background: darkred;
	height: 40px;
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	right: 7%;
	top: 15%;
	cursor: pointer;
	
	animation: modal 1s 2s forwards;
	visibility: hidden;
	opacity: 0;
}

#cerrar:checked + label, #cerrar:checked ~ .modal {
	display: none;
}

@keyframes modal {
	100% {
		visibility: visible;
		opacity: 1;
	}
}