:root {
    --color-bottom-stroke: #d29e2e;
    --color-bottoms: #ffcc66;
    --color-bottoms-light: #fef5e6;
    --color-background-grey: #c4c4c4;
    --color-background-black: #2b2b2b;
    --color-background-white: #ffffff;
    --color-text-light: #ffffff;
    --color-text-dark: #2b2b2b;
    /***************FONT SIZES**************/
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-p: 16px;
    /***************FONTS**************/
    --font-primary: "Montserrat", sans-serif;
    --font-secondary: "Libre Baskerville", serif;
 }
 
  /* HEADER - NAV */


.main-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-family: var(--font-primary);
   padding: 16px 32px;
   background-color: var(--color-background-white);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   overflow-x: hidden;
   /* Sombreado header-nav */
}

/*LOGO BLACK NAV*/
.logo-nav img {
   width: 120px;
   height: 110px;
}

/*LINKS BARRA DE NAVEGACION*/
.nav-links {
   list-style: none;
   display: flex;
   gap: 60px;
   z-index: 10;
}

.nav-links li a {
   text-decoration: none;
   color: var(--color-background-black);
   font-weight: normal;
   transition: color 0.3s;
   }

.nav-links li a:hover {
   color: var(--color-bottom-stroke);
}
    /* BURGER */
    .burger-menu {
      display: none;
      font-size: var(--font-size-h2);
      background: none;
      border: none;
      cursor: pointer;
      z-index: 20;
  }

  /* ADAPTATION */
  @media (max-width: 768px) {
      .nav-links {
          display: none;
          flex-direction: column;
          position: absolute;
          top: 80px;
          right: 0;
          background: var(--color-background-white);
          width: 100%;
          padding: 20px 0;
          text-align: center;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .nav-links.active {
          display: flex;
      }

      .burger-menu {
          display: block;
      }
  }


 
 body {
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    color: #000; 
    background: white; 
 }
 
 
 .section-title {
    text-align: center; 
    font-size: 2em; 
    margin: 40px 0; 
    font-family: var(--font-secondary);
 }
 
 
 /*ABOUT US*/
 .about {
    padding: 5px; 
    max-width: 700px; 
    margin: 0 auto; 
    font-family: var(--font-primary);
 }
 
 
 .about-content {
    display: flex; 
    gap: 95px; 
 }
 
 
 .about-column {
    flex: 1; 
    text-align: justify; 
 }
 
 
 /* NUESTRAS PROFESORAS */
 .teachers {
    padding: 40px 0; 
    background: white;
 }
 
 
 
 .teacher-container {
    width: 700px; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    margin: 20px auto; 
    padding: 20px; 
    box-sizing: border-box; 
    gap: 95px; 
 }
 
 

 .teacher-container.reverse {
    flex-direction: row-reverse;
 }
 
 
 
 .teacher-photo {
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
 }
 
 
 .teacher-photo img {
    width: 250px; 
    height: 250px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: none;
    display: block;
 }
 
 
 
 .teacher-info {
    flex: 1; 
    padding: 0 0px; 
    text-align: left;
    font-family: var(--font-primary);
 }
 
 
 .teacher-info h3 {
    margin: 0 0 10px; 
    font-size: 1.5em; 
    font-family: var(--font-primary);
 }
 
 
 /*ADAPTACION*/
 @media (max-width: 768px) {
    .about-content {
      display: flex;  
      flex-direction: column;
      margin-left: 10%;
      margin-right: 10%;
      max-width: 80%;
    }
 
 
    .teacher-container {
        width: 100%;
        flex-direction: column; 
        text-align: center;
      margin-left: 10%;
         margin-right: 10%;
         max-width: 80%;
    }
 
 
    .teacher-container.reverse {
        flex-direction: column;
    }
 
 
    .teacher-info {
        padding: 20px 0;
    }
 
 
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
 }
 /*FOOTER*/

.--main-footer {
   background-color: var(--color-background-black);
   display: flex;
   justify-content: space-between;
   /* Distribuye los elementos horizontalmente */
   align-items: center;
   /* Alinea los elementos verticalmente */
   flex-wrap: wrap;
   /* Permite que los elementos se acomoden si no caben en una línea */
   color: var(--color-background-white);
   padding: 20px;
   overflow-x: hidden;
}

.--logo-footer {
   display: flex;
   align-items: center;
   /* Alinea logo y dirección en una línea */
   gap: 60px;
   /* Espacio entre el logo y el address */

}

.--logo-footer img {
   max-width: 120px;
   /* Ajusta el tamaño del logo */
}

.--address {
   display: flex;
   flex-direction: column;
   /* Coloca los textos en columna */
   font-style: normal;
   gap: 5px;
   /* Espaciado entre líneas de dirección */
   list-style: none;
}
.--rrss-footer i {
   line-height: 100px;
   color:var(--color-background-white);
   font-size: 2rem;
   padding: 50px 50px;
  }
  .--rrss-footer i:hover{
     color:var(--color-bottom-stroke)
  }
   
.--footer-links ul {
   list-style: none;
   padding: 30px;
   display: block;
   gap: 30px;
   /* Espaciado entre enlaces */
}

.--footer-links ul li a {
   color: var(--color-background-white);
   text-decoration: none;
   transition: color 0.3s;
}

.--footer-links ul li a:hover {
   color: var(--color-bottom-stroke);
}

.--main-footer p {
   text-align: center;
   width: 100%;
   /* Asegura que el copyright ocupe toda la fila */
   margin-top: 10px;
}

.--rrss-footer i {
   line-height: 100px;
   color: var(--color-background-white);
   font-size: 2rem;
   padding: 50px 50px;
}

.--rrss-footer i:hover {
   color: var(--color-bottom-stroke)
}