/* ===================== */
/*  Variables de color   */
/* ===================== */

:root {
  /* Definición de colores principales */
  --color-bg-dark: #121212;       /* Fondo muy oscuro */
  --color-bg-light: #1A1A1A;      /* Superficie/Nav oscuro */
  --color-text-light: #f0e3e3;    /* Texto claro principal */
  --color-text-subtle: #0f0f0f;      /* Texto secundario/sutil */
  --color-primary: #0c0b0c;       /* Morado claro (Tono principal) */
  --color-primary-dark: ;  /* Morado/Borravino (Hover de botones) */
  --color-dark-surface: #1E1E1E;  /* Superficie de las tarjetas */

  /* Paleta de la página */
  --card: #806fa800;
  --border: #5b298a;
  --accent: #6a4df3;
  --muted: #4e3f75;
  --radius: 24px;
  --shadow: 0 10px 24px rgba(32, 23, 52, 0.18);
  --maxw: 88rem;
}

/* ===================== */
/*  Reset básico         */
/* ===================== */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background-color:#b79fe7a1;
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--color-text-light);
  line-height:1.6;
  letter-spacing:.1px;
  position:relative;
}

/* Contenedor general (misma anchura para todo el contenido) */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-main {
  max-width: var(--maxw);
  margin: 2.5rem auto 4rem;
  padding: 0 1.5rem 4rem;
}

/* ===================== */
/*  Links                */
/* ===================== */

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--color-text-light);
}

/* ===================== */
/*  NAV Principal        */
/* ===================== */

.main-header {
  background-color:#5e34d3b2;
  text color: black;
  padding:1.2rem 0;
  border-bottom:0.0625rem solid var(--color-bg-light); 
}

.top-nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1.5rem;
}



/* Bloque de Logos */
.logo-block {
  display:flex;
  align-items:center;
  gap:1.5rem;
}

.logo-link {
  font-size:1.6rem;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--color-primary);
}

.logo-icon-primary {font-size:2rem;}

.institution-text {
  font-size:1.2rem;
  color:var(--color-text-subtle);
  font-weight:300;
}

/* Menú de Enlaces */
.main-menu-list {
  color: #141413;
  font-weight:700;
  list-style:none;
  display:flex;
  gap:1.75rem;
}

.menu-link {
  font-size:1.1rem;
  color:white;
  padding:.25rem;
  text-transform:capitalize;
}

.menu-link:hover {
  color:var(--color-primary);
  
}

/* ===================== */
/*  Layout principal     */
/* ===================== */

.wrap{
  max-width:var(--maxw);
  margin:40px auto 64px;
  padding:0 20px 40px;
}

/* ===================== */
/*  Hero Perfil          */
/* ===================== */

.hero-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:32px 24px 40px;
  box-shadow:var(--shadow);
  border:1.5px solid var(--border);
  text-align:center;
  margin-bottom:32px;
}

.hero-avatar{
  display:flex;
  justify-content:center;
  margin-bottom:20px;
}

.hero-avatar img{
  width:260px;
  height:260px;
  border-radius:50%;
  object-fit:cover;
  border:px solid #7c57c0;
  
  margin-top:1rem;
}

.hero-info h1{
  font-size:2.2rem;
  font-weight:1000;
  margin-bottom:4px;
  color:#201734;
}

.hero-role{
  font-weight:700;
  color:var(--accent);
  margin-bottom:8px;
}

.hero-meta{
  font-size:0.9rem;
  color:var(--muted);
}

/* ===================== */
/*  Trayecto académico   */
/* ===================== */

.trayecto{
  background:var(--card);
  border-radius:var(--radius);
  padding:28px 24px 32px;
  box-shadow:var(--shadow);
  border:1.5px solid var(--border);
  margin-bottom:28px;
}

.trayecto h2 {
  text-align:center;
  margin-bottom:1.5rem;
  color:var(--accent);
}

/* Grid niveles */
.levels-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.8rem;
  margin:0 0 0.5rem;
}

.level-card{
  background:#6a41da70;
  border-radius:22px;
  padding:20px 20px 20px;
  border:1.9px solid var(--border);
}

.level-card h3{
  text-align:center;
  margin-bottom:10px;
  color:var(--accent);
}

.level-card ul{
  list-style:disc;
  padding-left:18px;
  font-size:0.9rem;
  color:var(--muted);
}

.level-card li{margin-bottom:4px}

/* ===================== */
/*  Sección Equipo       */
/* ===================== */

.section{
  background:var(--card);
  border-radius:var(--radius);
  padding:28px 24px 32px;
  box-shadow:var(--shadow);
  border:1.5px solid var(--border);
  margin-bottom:28px;
}

.section#equipo h2{
  text-align:center;
  color:var(--accent);
}

/* Pill con nombres (si la usás luego) */
.team-pill{
  margin:10px auto 24px;
  margin-top:2rem;
  padding:10px 18px;
  border-radius:999px;
  background:#6a41da70;
  border:1.5px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  justify-content:center;
  font-size:1rem;
  font-weight:600;
  color:var(--muted);
}

.team-pill span::before{
  content:"• ";
  color:var(--accent);
}

.team-pill span:hover{
  color:var(--color-primary);
  border-bottom:0.125rem solid var(--color-primary);
}

/* ===================== */
/*  Cards de estudiantes */
/* ===================== */

.main-content {
  padding-bottom:1rem;
}

.student-grid {
  margin-top:2.5rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));
  gap:2rem;
}

.student-card {
  background-color:#6a41da70;
  padding:1rem;
  border-radius:1rem;
  text-align:center;
  border:0.0625rem solid transparent; 
  box-shadow:0 0.25rem 0.5rem rgba(0,0,0,0.4);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.student-card:hover {
  transform:translateY(-0.75rem) scale(1.02);
  box-shadow:0 0 3rem rgba(132,62,223,0.6); 
  border-color:var(--color-primary);
}

.student-photo {
  width:200px;
  height:220px;
  border-radius:15px;
  object-fit:cover;
  margin-bottom:10px;
}

.student-name {
  font-size:1.1rem;
  color:var(--color-primary);
  margin-bottom:0.15rem;
}

.student-category {
  font-size:0.9rem;
  color:var(--color-text-light);
  margin-bottom:1rem;
}

.profile-button {
  display:inline-block;
  background-color: 
  color:var(--color-bg-dark);
  font-weight:bold;
  padding:0.6rem 1.6rem;
  border-radius:0.9rem;
  border:3px solid #b595f1;
  transition:background-color .3s, transform .1s, box-shadow .1s;
}

.profile-button:hover {
  background-color:var(--color-primary-dark);
  transform:translateY(-0.1rem);
  box-shadow:0 0.1rem 0.5rem rgba(0,0,0,0.5);
}

/* ===================== */
/*  Info institucional   */
/* ===================== */

.info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:2rem;
}

.info-card{
  margin:0.5rem 0;
  background:#c0abe7;
  border-radius:22px;
  padding:20px 20px 22px;
  border:1px solid var(--border);
}

.info-card h3{
  font-size:1rem;
  margin-bottom:8px;
  color:var(--accent);
}

.info-card ul{
  list-style:disc;
  padding-left:18px;
  font-size:0.9rem;
  color:var(--muted);
}

.info-card li{margin-bottom:4px}

/* ===================== */
/*  Footer               */
/* ===================== */

.footer-band{
  background:#9f91f3;
  padding:18px 24px;
  font-size:12px;
  text-align:center;
  color:#00000080;
}

/* ===================== */
/*  Responsive           */
/* ===================== */

@media (max-width:900px){
  .levels-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .info-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .hero-avatar img{
    width:220px;
    height:220px;
  }
}

@media (max-width:640px){
  .top-nav{
    flex-direction:column;
    align-items:flex-start;
    gap:0.75rem;
  }

  .main-menu-list{
    flex-wrap:wrap;
    gap:0.75rem 1.25rem;
  }

  .page-main{
    margin-top:1.5rem;
    padding-bottom:3rem;
  }

  .levels-grid{
    grid-template-columns:1fr;
  }

  .student-grid{
    grid-template-columns:1fr;
  }

  .info-card{
    margin:0.25rem 0;
  }
}

@media (max-width:420px){
  .hero-card,
  .trayecto,
  .section{
    padding:20px 16px 24px;
  }

  .hero-avatar img{
    width:180px;
    height:180px;
  }

  .team-pill{
    border-radius:18px;
    font-size:0.9rem;
  }
}