/*FUENTES*/
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Alfa+Slab+One&family=Bellefair&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  background-color: #f4f4f4;
  color: #040a02;
}
/* Estilos básicos para el body */

/* Estilos de la navegación principal */

body {
  font-family: 'Georgia', serif;
  margin: 0;
  background-image: url(../img/fondoverde.jpg);
  background-size: contain;
  color: #ffffff; /* Marrón oscuro para el texto */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.indice-grupal {
    font-size: 0.8rem;
}

.imagen-anto {
display: block; /* La imagen se comporta como un bloque */
    margin-left: auto; /* Margen izquierdo automático */
    margin-right: auto; /* Margen derecho automático */
    /* O de forma abreviada: margin: 0 auto; */
    max-width: 100%; /* Opcional: Para que la imagen sea responsiva y no se desborde */
    height: auto; /* Mantiene la proporción de la imagen */
}

.imagen-anto {
    width: 14rem; /* Ancho de la imagen. Ajusta según necesites */
    height: 14rem; /* Alto de la imagen. Es importante que sea igual al ancho para un círculo perfecto */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse, recortando si es necesario */
    border-radius: 50%; /* Esto hace que la imagen sea circular */
    border: 0.2rem  solid rgb(107, 151, 90); /* Borde blanco de 5px */
    box-shadow: 0.15rem rgba(0, 128, 0, 0.6); /* Sombra para la "estética naturalista verde" */
    transition: transform 0.3s ease; /* Pequeña transición para interactividad */
}

.imagen-anto:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
   box-shadow: 0 0 1.25rem 0.3125rem rgba(31, 102, 31, 0.8); /* Sombra más intensa al pasar el ratón */
}

.indice-grupal{
    background-color: #4f684f; /* Fondo del menú verde claro */
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    border: 0.15rem solid #728c69; /* Borde que simula un marco de madera o piedra */
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.indice-grupal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem; /* Espacio entre los ítems */
}

.indice-grupal a {
    text-decoration: none;
    color: #f0f0e0; /* Color crema para el texto */
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    position: relative;
    transition: all 0.3s ease-in-out;
}

/* Pseudo-elemento para el efecto de brillo fantasía */
.indice-grupal a::before {
    content: '';
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    right: -0.25rem;
    bottom: -0.25rem;
    background: linear-gradient(45deg, #a4e5a4, #b2f0b2, #a4e5a4); /* Brillo verdoso */
    z-index: -1;
    filter: blur(0.5rem);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 0.75rem;
}

/* Cambio de estado al pasar el mouse (hover) */
.indice-grupal a:hover {
    color: #4d9c4d; /* Cambia el color del texto a un verde oscuro */
}

.indice-grupal a:hover::before {
    opacity: 0.8;
}

.integrantes {
background-color: transparent;
 padding: 1rem 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    border: 0.15rem solid #728c69; /* Borde que simula un marco de madera o piedra */
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.integrantes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem; /* Espacio entre los ítems */
}

.integrantes  a {
    text-decoration: none;
    color: #f0f0e0; /* Color crema para el texto */
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    position: relative;
    transition: all 0.3s ease-in-out;
}



.integrantes :hover {
    color: #4d9c4d; /* Cambia el color del texto a un verde oscuro */
}

.integrantes a:hover::before {
    opacity: 0.8;
}


main section article{padding: 0.5rem;}
main section aside {background: #b2f0b2; padding: 1rem;}


.inicio {display: flex;
justify-content: space-around;
list-style: none;
border: #a4e5a4;
transition: all 0.4s ease-in-out; 
flex-wrap: initial;
}

.nivel-1:hover {
    /* 1. AGRANDAR EL CONTENEDOR EXTERIOR (que no tiene texto) */
    transform: scale(1.07); 
    box-shadow: 0 0 1.25rem 0.3125rem rgba(31, 102, 31, 0.8); /* Sombra más intensa al pasar el ratón */
}

.nivel-1 {
    width: 25%;
   background-color: #4f684f;
width: 30%;
margin: 1rem;
border-radius: 0.75rem;
list-style: none;
 border: 0.2rem  solid rgb(107, 151, 90); /* Borde blanco de 5px */
    box-shadow: 0.15rem rgba(0, 128, 0, 0.6); /* Sombra para la "estética naturalista verde" */
    transition: transform 0.3s ease; /* Pequeña transición para interactividad */
}


.nivel-2 {
    width: 25%;
    background-color: #4f684f;
width: 30%;
margin: 1rem;
border-radius: 0.75rem;
list-style: none;
 border: 0.2rem  solid rgb(107, 151, 90); /* Borde blanco de 5px */
    box-shadow: 0.15rem rgba(0, 128, 0, 0.6); /* Sombra para la "estética naturalista verde" */
    transition: transform 0.3s ease; /* Pequeña transición para interactividad */
    
}

.nivel-2:hover {
    /* 1. AGRANDAR EL CONTENEDOR EXTERIOR (que no tiene texto) */
    transform: scale(1.07); 
    box-shadow: 0 0 1.25rem 0.3125rem rgba(31, 102, 31, 0.8); /* Sombra más intensa al pasar el ratón */
}


.nivel-3 {
    width: 25%;
    background-color: #4f684f;
width: 30%;
margin: 1rem;
border-radius: 0.75rem;
list-style: none;
 border: 0.2rem  solid rgb(107, 151, 90); /* Borde blanco de 5px */
    box-shadow: 0.15rem rgba(0, 128, 0, 0.6); /* Sombra para la "estética naturalista verde" */
    transition: transform 0.3s ease; /* Pequeña transición para interactividad */  
}

.nivel-3:hover {
    /* 1. AGRANDAR EL CONTENEDOR EXTERIOR (que no tiene texto) */
    transform: scale(1.07); 
    box-shadow: 0 0 1.25rem 0.3125rem rgba(31, 102, 31, 0.8); /* Sombra más intensa al pasar el ratón */
}


.nivel-4 {
    width: 25%;
    background-color: #4f684f;
width: 30%;
margin: 1rem;
border-radius: 0.75rem;
list-style: none;
 border: 0.2rem  solid rgb(107, 151, 90); /* Borde blanco de 5px */
    box-shadow: 0.15rem rgba(0, 128, 0, 0.6); /* Sombra para la "estética naturalista verde" */
    transition: transform 0.3s ease; /* Pequeña transición para interactividad */
    
}

.nivel-4:hover {
    /* 1. AGRANDAR EL CONTENEDOR EXTERIOR (que no tiene texto) */
    transform: scale(1.07); 
    box-shadow: 0 0 1.25rem 0.3125rem rgba(31, 102, 31, 0.8); /* Sombra más intensa al pasar el ratón */
}


.datos
{background-color: #4f684f;
    padding: 1rem;
    margin: 1rem;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    width: auto;
   display: flex;
   justify-content: space-around;
   border: 0.2rem  solid rgb(107, 151, 90); /* Borde blanco de 5px */
}



h1 {
    text-align: center;
    font-family: "Bellefair", serif;
    font-size: 2rem;
}

h2 {
    font: size 3rem;
    font-family: "Bellefair", serif;
text-align: center;
}

footer {
    background-color: rgb(73, 109, 81);
    font-size: 0.8rem;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    margin: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.8rem;
    margin-top: 0.5rem;
    display: block;
    unicode-bidi: isolate;
    border: 0.2rem  solid rgb(107, 151, 90); /* Borde blanco de 5px */
}

.pagina {
    max-width:95rem
}