/* ==========================================
   VARIABLES Y ESTILOS GENERALES
   ========================================== */

body.perfil-camila {
  background-color: #f3daff; /* El tono que elegiste para tu perfil*/
} 

body {
  font-family: "Quintessential", serif;
  font-weight: 400;
  font-style: normal;
} 

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Quita los márgenes por defecto del navegador */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

header, footer {
    background-color: #c35ffc;
    color: #fefdfe;
    padding-block: var(--espaciado-base);
}

a {
color: #ffffff;
text-decoration: none;
}

/* ==========================================
   NAVEGACIÓN SUPERIOR CON BARRA VIOLETA
   ========================================== */

/* Contenedor principal de la barra que ocupa el 100% */
nav.navegacion-superior {
  background-color: #c35ffc; /* Fondo lila */
  padding: 25px 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: right;
}

/* Lista horizontal de botones */
.navegacion-superior ul {
  list-style: none; /* Quita los puntos de la lista */
  padding: 0;
  margin: 0;
  display: flex; /* Alinea los botones horizontalmente */
  gap: 15px; /* Espaciado entre botones */
  justify-content: right; /* Menú a la derecha */
  flex-wrap: wrap;
}

/* Estilo de los botones en forma de pastilla */
.navegacion-superior a {
  display: inline-block;
  padding: 10px 24px;
  background-color: #c35ffc; /* Botón violeta */
  color: #ffffff; /* Texto blanco en negrita */
  text-decoration: none; /* Quita el subrayado */
  font-weight: 700;
  font-family: var(--fuente-principal);
  font-size: 0.95rem;
  border-radius: 0px; /* Bordes cuadrados */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Efecto al pasar el mouse por arriba (Hover) */
.navegacion-superior a:hover {
  background-color: var(--marron-hover); /* Se aclara ligeramente */
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Estado del botón activo o seleccionado */
.navegacion-superior a.activo {
  background-color: var(--marron-hover);
}

.Biografía {
  border: 2px solid #ffffff;
  padding: 1rem;
  margin: 3rem;
  margin-bottom: 1rem;
  border-radius: 0px;
  background: #e2c4f9;
}

/* SECCIÓN INTERESES */
/* INTERESES, EL PADRE: Define la grilla de 4 columnas */
.intereses {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 1370px;
  margin: 3rem auto;
  margin-left: 3rem;
  column-gap: 3rem; /* División de columnas */
  row-gap: 4rem;    /* Distancia vertical si hay más de 4 elementos */
} 

/* INTERESES: Regla para que el título ocupe todo el ancho de la grilla */
.titulo {
  grid-column: 1 / -1; /* Se estira desde la columna 1 hasta la última */
  margin-bottom: 0.5rem;
  text-align: 4rem; /* Asegura la alineación con el borde izquierdo del primer bloque */
}

/* LOS HIJOS: Estilo de cada tarjeta individual */
.interes {
  border: 2px solid #ffffff;
  padding: 1rem;
  background: #e2c4f9;
  max-width: 1200px;
  width: 100%;
  gap: 2rem; /* Espacio entre columnas */ 
}

/* ==========================================
   ADAPTACIÓN PARA CELULARES 
   ========================================== */
@media (max-width: 768px) {
    /* Fuerza a la grilla a convertirse en 1 columna vertical */
    .intereses {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin-inline: auto;
        gap: 15px;
      }

    /* Asegura que cada tarjeta ocupe el 100% del ancho del contenedor */
    .interes {
        width: 90%;
        max-width: 100%;
    }
  }

/* ==========================================
   <!-- SECCIÓN: MI CAMINO POR FADU --> 
   ========================================== */
   
/* CARRERA, EL PADRE: Define la grilla de 4 columnas */
.contenedor {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 1370px;
  margin: 3rem auto;
  margin-left: 3rem;
  column-gap: 3rem; /* División de columnas */
  row-gap: 2rem; /* Distancia vertical si hay más de 4 elementos */
} 

/* LOS HIJOS: Estilo de cada tarjeta individual */
.Carrera {
  border: 2px solid #ffffff;
  padding: 1rem;
  background: #e2c4f9;
  max-width: 1200px;
  width: 100%;
  gap: 2rem; /* Espacio entre columnas */ 
}

/* ==========================================
   ADAPTACIÓN PARA CELULARES 
   ========================================== */
@media (max-width: 768px) {
    /* Fuerza a la grilla a convertirse en 1 columna vertical */
    .contenedor {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin-inline: auto;
        gap: 15px;
    } 
  
    /* Asegura que cada tarjeta ocupe el 100% del ancho del contenedor */
    .contenedor {
        width: 90%;
        max-width: 100%;
    }
  }

/* EQUIPO, EL PADRE: Define la grilla de 4 columnas */
.contenedore {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 1rem;
  gap: 2rem;
  width: 100%;
  max-width: 80rem;
  margin: 3rem auto;
  column-gap: 3rem; /* División de columnas */
  row-gap: 2rem; /* Distancia vertical si hay más de 4 elementos */
}

/* GRUPO: Regla para que el título ocupe todo el ancho de la grilla */
.titulo {
  grid-column: 1 / -1; /* Se estira desde la columna 1 hasta la última */
  margin-bottom: 0.5rem;
  text-align: 4rem; /*Asegura la alineación con el borde izquierdo del primer bloque */
}

/* LOS HIJOS: Estilo del rótulo de mi compañera */
.Grupo {
  border: 2px solid #ffffff;
  padding: 1rem;
  border-radius: 0px;
  margin: center; 
  background: #ffffff96;
  max-width: 20rem;
  width: 30%;
  text-align: center;
}

/* ==========================================
   ADAPTACIÓN PARA CELULARES 
   ========================================== */
@media (max-width: 768px) {
    /* Fuerza a la grilla a convertirse en 1 columna vertical */
    .Grupo {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin-inline: auto;
        gap: 15px;
    } 
  
    /* Asegura que cada tarjeta ocupe el 100% del ancho del contenedor */
    .Grupo {
        width: 90%;
        max-width: 100%;
    }
  }

/* DATOS ACADEMICOS, EL PADRE: Define la grilla de 4 columnas */
.datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 1250px;
  margin: 2rem auto; /* Aumenta la distancia entre columnas */
  column-gap: 3rem; 
  row-gap: 2rem;    /* Distancia vertical si hay más de 4 elementos */
  margin-inline: auto;
} 

/* Regla para que el título ocupe todo el ancho de la grilla */
.titulo {
  grid-column: 1 / -1; /* Se estira desde la columna 1 hasta la última */
  margin-bottom: 0.5rem;
  text-align: 4rem; /* Asegura la alineación con el borde izquierdo del primer bloque */
}

/* LOS HIJOS: Estilo de cada tarjeta individual */
.legal {
  border: 2px solid #ffffff;
  padding: 1rem;
  border-radius: 0px;
  background: #c987fc;
  color: #fff; 
  max-width: 420px;
  width: 100%;
  gap: 2rem; /* Espacio entre columnas */
  align-items: left;
  text-align: left; 
  margin-inline: auto; 
}

/* ==========================================
   ADAPTACIÓN PARA CELULARES 
   ========================================== */
@media (max-width: 768px) {
    /* Fuerza a la grilla a convertirse en 1 columna vertical */
    .datos {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin-inline:left;
        gap: 15px;
    } 
  
    /* Asegura que cada tarjeta ocupe el 100% del ancho del contenedor */
    .datos {
        width: 90%;
        max-width: 100%;
        text-align: left;
    }
  }

/* Contenedor del footer que ocupa el 100% */
footer {
  background-color: #c35ffc; /* Fondo lila */
  padding: 25px 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: right;
}