body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    background: linear-gradient(135deg, #fde4f2, #f3e0ff, #fffafc);
  }
  
  .contenedor {
    background-color: white;
    border-radius: 1.25rem;
    max-width: 56rem;
    margin: 2.5rem auto;
    padding: 2.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  }
  
  /* SOLO la botonera sin puntos */
  .botonera ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .botonera button {
    background-color: #f3e0ff;
    border: none;
    border-radius: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    color: #5c4d6a;
    cursor: pointer;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .botonera button:hover {
    background-color: #c9a3f1;
    color: white;
    transform: translateY(-0.1rem);
  }

  .perfil {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .perfil h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #4a375a;
  }
  
  .avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.1);
    border: 0.25rem solid #f3e0ff;
  }

  .foja-academica {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .titulo-seccion {
    font-size: 2rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
  }
  
  .titulo-seccion::after {
    content: '';
    display: block;
    height: 0.15rem;
    width: 100%;
    margin: 0.5rem auto 0;
    background-color: #e3cfff;
    border-radius: 1rem;
  }
  
  /* Subtítulo con línea más ancha */
  .subtitulo-carrera {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.5rem;
  }
  
  .subtitulo {
    font-size: 1rem;
    color: #777;
    margin-bottom: 0.5rem;
  }
  
  .linea-subtitulo {
    height: 0.125rem;
    width: 10rem;
    background-color: #e3cfff;
    border-radius: 1rem;
  }
  
  /* Caja general de materias */
  .materias-box {
    background-color: #faf5ff;
    padding: 2rem;
    border-radius: 1rem;
    max-width: 45rem;
    margin: 0 auto;
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.05);
  }
  
  /* Subtítulo de materias */
  .subtitulo-materias {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: #7a6a94;
  }
  
  /* Bloque de materias */
  .bloque-materias {
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
  }
  
  .bloque-materias p {
    margin-bottom: 1rem;
  }

  .integrantes {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .botonera-integrantes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
  }
  
  /* Botón de integrante */
  .btn-integrante {
    background-color: #ffe9e9; /* rosado pastel */
    color: #5b4b4b;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }
  
  .btn-integrante:hover {
    background-color: #f7bfc8; /* rosa más fuerte al hover */
    color: white;
    transform: translateY(-0.1rem);
  }

  .datos-universidad {
    text-align: center;
    max-width: 45rem;
    margin: 0 auto 3rem auto;
  }
  
  .titulo-seccion-rosado {
    font-size: 2rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 1rem;
    color: #333;
    border-bottom: 0.15rem solid #f7bfc8;
    padding-bottom: 0.3rem;
    display: inline-block;
  }
  
  .info-universidad {
    margin-top: 2rem;
  }
  
  .info-universidad p {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: #444;
    line-height: 1.5;
  }
  
  .clases {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  /* Título con subrayado lila */
  .titulo-seccion-lila {
    font-size: 2rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 2rem;
    color: #333;
    display: inline-block;
    border-bottom: 0.15rem solid #e3cfff; /* mismo lila de navbar */
    padding-bottom: 0.3rem;
  }
  
  /* Lista horizontal de clases */
  .lista-clases {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
  }
  
  /* Enlaces estilo subrayado + animación */
  .lista-clases a {
    position: relative;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    padding-bottom: 0.2rem;
    border-bottom: 0.1rem solid black; /* línea negra siempre visible */
    transition: color 0.3s ease;
  }
  
  /* Animación de subrayado rosa al hover */
  .lista-clases a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.1rem;
    background-color: #f7bfc8; /* rosa pastel */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .lista-clases a:hover::after {
    transform: scaleX(1);
  }
  
  .lista-clases a:hover {
    color: #a6638d; /* tono de texto más intenso */
  }

  .datos-academicos {
    background-color: #f9f7fb;
    padding: 2rem;
    margin: 0 auto 3rem auto;
    max-width: 45rem;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.03);
    text-align: center;
  }
  
  /* Título */
  .titulo-seccion-sutil {
    font-size: 1.5rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 1.5rem;
    color: #444;
    display: inline-block;
    border-bottom: 0.15rem solid #e3cfff;
    padding-bottom: 0.3rem;
  }
  
  /* Lista centrada */
  .lista-academicos {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    text-align: center; /* 👈 ahora sí, todo centrado */
  }
  
  .lista-academicos li {
    margin-bottom: 0.5rem;
  }

  .footer-final {
    background-color: #fbd3dc; /* rosado alegre pastel */
    color: white;
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600; /* ✔ más bold */
  }
  
  .footer-final p {
    margin: 0 0 1rem 0;
  }
  
  .footer-final p:last-child {
    margin-bottom: 0;
  }

  /* clase 2 */
  /* Contenido específico para las páginas de clase */
.clase-contenido {
    text-align: left; /* Mantener margen a la izquierda */
  }
  
  /* Títulos con subrayado lila */
  .titulo-subrayado {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-top: 2rem;     /* espacio arriba */
    margin-bottom: 1rem;  /* espacio abajo */
    color: #4a375a;
    border-bottom: 0.15rem solid #e3cfff;
    padding-bottom: 0.3rem;
    display: inline-block;
  }
  
  /* Párrafos y listas dentro de clase */
  .clase-contenido p,
  .clase-contenido ul {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 50rem;
  }
  
  /* Sangría en listas */
  .clase-contenido ul {
    padding-left: 1.5rem;
  }
  
  /* Estilo para código en línea */
  code {
    background-color: #f3e0ff;
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
    font-family: monospace;
    font-size: 0.95rem;
  }
  
  /* Botón para volver al índice */
  .btn-volver {
    display: inline-block;
    background-color: #ffe9e9; /* rosado pastel */
    color: #5b4b4b;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
    text-decoration: none;
    margin-top: 3rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .btn-volver:hover {
    background-color: #f7bfc8;
    color: white;
    transform: translateY(-0.1rem);
  }

  /*clase 4*/
  .botonera-vertical {
    position: fixed;
    top: 2rem;
    left: 2rem;
    width: 10rem; /* ancho más fino */
    background-color: #f3e0ff;
    padding: 1.5rem 0.8rem; /* menos padding horizontal para que no quede muy ancho */
    border-radius: 1rem;
    box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.1);
    font-family: 'Quicksand', sans-serif;
    z-index: 1000;
  }
  
  .botonera-vertical ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .botonera-vertical li {
    margin-bottom: 1.8rem;
  }
  
  .botonera-vertical a {
    font-weight: 600;
    font-size: 1.1rem;
    color: #5c4d6a;
    text-decoration: none;
    padding-bottom: 0.2rem;
    border-bottom: 0.15rem solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
    display: inline-block;
  }
  
  .botonera-vertical a:hover,
  .botonera-vertical a:focus {
    color: #4a375a;
    border-bottom-color: #c9a3f1;
  }
  
  
  /* Espacio amplio entre secciones para que solo una sea visible */
  
  .seccion {
    margin-bottom: 10rem;
  }
  
  /* Títulos y listas */
  
  .seccion h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.7rem;
    color: #4a375a;
    margin-bottom: 1rem;
  }
  
  .seccion h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    color: #6b5684;
    margin-bottom: 1.2rem;
    border-bottom: 0.2rem solid #e3cfff;
    padding-bottom: 0.4rem;
    display: inline-block;
  }
  
  .seccion ul,
  .seccion ol {
    padding-left: 1.8rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
  }
  
  /* Imagen avatar circular */
  
  .avatar-clase4 {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.1);
    margin-top: 1rem;
  }
  
  /* Botón para ver info completo */
  
  .btn-ver-info {
    display: inline-block;
    background-color: #ffe9e9;
    color: #5b4b4b;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
    text-decoration: none;
    margin-top: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .btn-ver-info:hover {
    background-color: #f7bfc8;
    color: white;
    transform: translateY(-0.1rem);
  }