/* Estructura base igual que la principal */
* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif; 
}

main {
  margin-left: 260px;            /* El contenido inicia después del sidebar expandido */
  transition: all 0.3s ease;
  width: calc(100% - 260px);     /* Ajusta el ancho para llenar el espacio restante */
}

/* Cuerpo general de la página */
body { 
  display: flex;                /* Usa flexbox para alinear sidebar y el contenido */
  min-height: 100vh;            /* Altura mínima de la ventana */
  background: linear-gradient(to bottom right, #ffffff, #fcd1c8);    /* Color del fondo */
}

/* SIDEBAR  */
.sidebar {
  width: 260px;                 /* Ancho */
  background-color:  #012f50;    /* Color de fondo */
  color:#ffffff;                 /* Color texto */
  padding: 20px 0;
  position: fixed;              /* Fija al borde izquierdo */
  top: 0; 
  left: 0;
  height: 100vh;                /*Altura de la ventana */
}

/* Caracteristicas nombre asociación */
.logo a {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  color: #ffffff;
  text-decoration: none; /* quita el subrayado */
  font-size: 26px;
  letter-spacing: 1px;/*Espacio entre cada letra*/
  transition: color 0.3s ease;
}

/* Posición del nombre de la Asociación  */
.logo { 
  text-align: center; 
  margin-bottom: 20px; /*Espacio entre el nombre de la asociación y el menu*/
  margin-left: 40px;
}

/* Menú de navegación */


/* Enlaces del menú */
.menu a {
  color: #ffff;
  text-decoration: none;        /* Quita subrayado */
  padding: 12px 20px; 
  display: block;
  font-size: 15px;
  border-radius: 6px;
}

/* Efecto al pasar el mouse */
.menu a:hover { 
  background-color: #1e79bb; 
  color: #ffffffff;; 
}


/* Tipografía */

/*Fuente base: Arial */
body {
  font-family: 'Arial', sans-serif;
}

/* Títulos destacados: Arial Rounded MT Bold */
h1, h2, h3, .titulo-destacado {
  font-family: 'Arial Rounded MT Bold', 'Arial Rounded MT', Arial, sans-serif;
  text-transform: uppercase; /* fuerza mayúsculas */
  letter-spacing: 1px; /* mejora la legibilidad */
  font-weight: bold;
}

/* Subtítulos o textos complementarios: Cambria */
h4, h5, h6, .subtitulo, .texto-cambria {
  font-family: 'Cambria', serif;
  font-style: normal;
}

.hero h1 {
  position: relative;
  z-index: 1; /* Asegura que el texto quede encima */
}

/* Encabezado central con logo y texto*/
.hero {                            /* Pasa por encima de la decoracion */
  text-align: center;
  margin-top: 20px;
}

@keyframes float {
  0% { 
    transform: translateY(0px);     /* Posición inicial */
  }
  50% { 
    transform: translateY(-10px);   /* Sube 10px a mitad de ciclo */
  }
  100% { 
    transform: translateY(0px);     /* Vuelve a la posición original */
  }
}

/* Imagen del logo central */
.hero-logo {
  width: 200px;
  height: auto; 
  margin-bottom: 18px;
  animation: float 3s ease-in-out infinite; /* Animación flotante */
}

/* Título principal  */
.hero-title { 
  font-size: 40px;
  color: #1e79bb;
  margin-bottom: 8px;
}

/* Subtítulo */
.hero-subtitle { 
  color: #31393a; 
  font-size: 16px; 
}

/* Contenido principal */
.junta-section {
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  background: #fff;
  border-radius: 14px;
  padding: 40px;
}

/* Caracteristicas nombre asociación */
.logo a {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  color: #ffffff;
  text-decoration: none; /* quita el subrayado */
  font-size: 26px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}


.junta-title {
  text-align: center;
  color: #1e79bb;
  font-size: 26px;
  margin-bottom: 40px;
}

/* Cuadrícula de tarjetas (columnas/filas) */
.junta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));/*Posicionamiento de las tarjetas*/
  gap: 30px;
  justify-items: center;
}

/* Tarjeta individual (posicionamiento)*/
.junta-card {
  background: #fcd1c8;
  border-radius: 14px;
  text-align: center;
  padding: 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.junta-card:hover {
  transform: translateY(-8px);/*movimiento de la caja*/
}

/* Imagen del miembro */
.junta-img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  border: 4px solid #cc2027;
}

/* Nombre y puesto */
.junta-card h3 {
  color: #31393a;
  font-size: 18px;
  margin-bottom: 6px;
}

.puesto {
  color: #1e79bb;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Funciones */
.funciones {
  list-style: none;
  padding: 0;
  color: #31393a;
}

.funciones li {
  font-size: 14px;
  margin: 6px 0;
}




/* Estilo general del item del menú */
.menu-item {
  display: flex;                 
  align-items: center;            /* Centra verticalmente el icono y el texto dentro del contenedor */
  justify-content: center;        /* Centra horizontalmente el contenido (icono + texto) dentro del enlace */
  gap: 12px;                      /* Espacio horizontal entre el icono y el texto */
  color: #fff;                
  text-decoration: none;          /* Quita el subrayado de los enlaces */
  padding: 10px 20px;          
  border-radius: 6px;             /* Bordes redondeados */
  font-size: 15px;                /* Tamaño del texto */
  transition: background-color 0.3s ease; /* animación al hacer hover */
}

/* Hover */
.menu-item:hover {
  background-color: #1e79bb;      /* Cambia el color de fondo al pasar el cursor */
}

/* Íconos del menú */
.menu-item img {
  object-fit: contain;            /* Ajusta la imagen dentro del contenedor sin recortarla */
  transition: transform 0.3s ease;/* Transición suave para el efecto de zoom */
  vertical-align: middle;         /* Alinea verticalmente el icono respecto al texto */
}

/* Pequeño zoom al pasar el mouse */
.menu-item:hover img {
  transform: scale(1.1);          /* Aumenta ligeramente el tamaño del icono cuando se pasa el cursor */
}

/*-----------------------------------------------------------------*/


/* Características de los iconos del menú */

.icon-home {
  width: 50px;                    /* Ancho del icono */
  height: 50px;                   /* Alto del icono */
}

.icon-junta {
  width: 50px;                    
  height: 54px;                   
}

.icon-noticias {
  width: 50px;                    
  height: 50px;                   
  margin-top: 2px;                /* Mueve el icono hacia abajo */
}

.icon-cursos {
  width: 58px;                    
  height: 58px;                   
  margin-top: -3px;               /* Mueve el icono ligeramente hacia arriba*/
}

.icon-serparte {
  width: 60px;                   
  height: 60px;                
  margin-top: 1px;                
}


/* Para versión minimizada del SIDEBAR */
.sidebar.collapsed .menu-item span {
  display: none;                  /* Oculta el texto cuando el sidebar está minimizado */
}

.sidebar.collapsed .menu-item {
  justify-content: center;        /* Centra los íconos cuando no hay texto visible */
}



/* Función para expandir o contraer el SIDEBAR */
.menu-toggle {
  position: fixed;                /* Fija el botón en la ventana */
  top: 7px;                      
  left: 10px;                  
  font-size: 28px;                /* Tamaño del icono*/
  color: white;     
  margin-left: 23px;                
  border: none;                  
  padding: 8px 12px;            
  border-radius: 6px;          
  cursor: pointer;                /* Muestra la mano al pasar el cursor */
  z-index: 1;                     /* Asegura que el botón quede encima del sidebar */
  transition: background-color 0.3s ease; /* Transición suave al cambiar color */
}

.menu-toggle:hover {
  background-color: #1e79bb;    
}

/* Cuando el sidebar esté contraído */
.sidebar.collapsed {
  width: 120px;                   /* Ancho del sidebar cuando está encogido */
  overflow: hidden;               /* Oculta el contenido que sobrepasa el ancho */
  transition: width 0.3s ease;   
}

.sidebar.collapsed .menu a {
  text-align: center;             /* Centra los iconos dentro del sidebar minimizado */
  padding: 12px 0;               
}

.sidebar.collapsed .logo h2 a {
  font-size: 0;                   /* Oculta el texto del logo al colapsar */
}

.sidebar.collapsed .logo h2 a::before {
  content: "";                    
  font-size: 24px;                
  color: white;                   
}

/* Cuando el sidebar está colapsado */
.sidebar.collapsed ~ main {
  margin-left: 120px;            /* Ajusta el espacio del footer cuando el menú se minimiza */
  width: calc(100% - 120px);
}



/*Footer*/

/* contactos*/
.contacto-parte {
  background: #1e79bb; /* color de fondo principal */
  color: #ffffff;
  padding: 15px 10px;
  text-align: center;
  width: 100%;
  margin: 0;
}


.contacto-parte h2 { /*titulo contactos*/
  font-size: 1.8rem;
  margin-bottom: 0.4px;
  color: #fff;
  font-size: 22px;
  background: #1e79bb;
  letter-spacing: 1px;
}


/* Contenedor horizontal */
.contacto-contenido {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* mantiene títulos arriba */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 60px;
  
}

/* Cada bloque */
.contacto-item {
  flex: 1;
  text-align: center;
}

.contacto-item h3 {
  margin-bottom: 10px;/*caracteristicas de los subtitulos*/
  font-size: 20px;
}

.contacto-item p {
  font-size: 18px;
  color: #ffffff;
  margin: 0;
}

.footer-simple {/*caracteristicas footer gris*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #494b4d;
  padding: 12px 30px;
  font-size: 14px;
  flex-wrap: wrap;
  margin-top: auto;
}

.footer-simple p {
  color: #ffffff;
  font-size: 13px;
  margin: 0;
}


/* animación al pasar el mouse por el icono */
.social-links a {
  margin-left: 10px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-links a:hover {
  transform: scale(1.15);
}




.creditos-section {
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 40px;
  text-align: center;
}

.creditos-title {
  color: #1e79bb;
  font-size: 26px;
  margin-bottom: 35px;
  font-family: 'Arial Rounded MT Bold', Arial;
  text-transform: uppercase;
}

.creditos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  justify-items: center;
}

.credito-card {
  background: #fcd1c8;
  padding: 20px;
  border-radius: 14px;
  text-align: center;
  transition: 0.25s ease;
}

.credito-card:hover {
  transform: translateY(-7px);
}




/* Foto interna */
.foto-circular {
  width:140px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #cc2027;
}

/* Foto interna */
.foto-circular2 {
  width:140px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #cc2027;
}

/* Foto interna */
.foto-circular3 {
  width:140px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #cc2027;
}


.credito-card h3 {
  margin-top: 8px;
  color: #31393a;
  font-size: 18px;
}

.colegio {
  color: #1e79bb;
  font-size: 16px;
  margin-top: 4px;
}

/*  Responsive para celulares */
@media (max-width: 768px) { 

  /* Ocultarel toggler */
  .menu-toggle {
    display: none;            /* No se muestra el ícono del menú */
  }

  /* barra inferior */
  .sidebar {
    width: 100%;              
    height: auto;             /* Altura automática */
    position: fixed;          /* Fija en la pantalla */
    bottom: 0;                /* Pegado abajo */
    top: auto;                /* Quita posición superior */
    left: 0;                 
    display: flex;          
    justify-content: space-around; /* Distribuye los ítems */
    align-items: center;     
    background-color: #012f50;
    padding: 4px;           /* Espaciado vertical */
    z-index: 99;            /* Encima de todo */
    border-top: 2px solid #1e79bb; /* Línea de separación superior */
  }

  /* Oculta el logo dentro del sidebar */
  .sidebar .logo {
    display: none;            /* Elimina la versión grande del logo */
  }

  /* Menú horizontal  */
  .menu {
    display: flex;            
    flex-direction: row;      /* En fila */
    justify-content: space-around; /* Ítems distribuidos */
    align-items: center;      /* Verticalmente centrados */
    width: 100%;              
    padding: 0;
    margin: 0;
  }

  /* Ítems del menú  */
  .menu-item {
    display: flex;            
    flex-direction: column;   /* Icono arriba y texto abajo */
    justify-content: center;  /* Centrado vertical */
    align-items: center;      /* Centrado horizontal */
    text-decoration: none;    /* Quita subrayado */
    color: #ffffff;          
    font-size: 11px;         
    padding: 8px;             /* Espaciado interno */
    flex: 1;                  /* Ocupa espacio proporcional */
  }

  /* Íconos más pequeños */
  .menu-item img {
    width: 50px;              /* Tamaño del icono */
    height: 45px;
    margin-bottom: -9px;       /* Espacio con el texto */
    margin-left: 3.5px;
  }

  /* Texto debajo del icono */
  .menu-item span {
    display: block;           /* Se comporta como bloque */
    font-size: 14px;          
    margin-top: 1px;          /* Separación del icono */
    margin-left: 9px;
  }

  /* Efecto hover */
  .menu-item:hover {
    background-color: #1e79bb; /* Color al pasar el mouse */
    border-radius: 8px;        /* Esquinas redondeadas */
  }

  /* Ajusta el contenido principal */
  main {
    margin: 0;
    width: 100%;               /* Ocupa todo el ancho */
    padding-bottom: 85px;     /* Espacio para que no lo tape el menú inferior */
  }

  /* Ajustes de espacio para el menú */
  .contacto-contenido {
    display: flex;            
    justify-content: center;   /* Centro horizontal */
    align-items: center;       /* Centro vertical */
    text-align: center;        /* Texto centrado */
    flex-wrap: wrap;           /* Permite que los elementos salten de línea */
    gap: 20px;                 /* Separación entre ítems */
    padding: 20px;
  }

  .contacto-item {
    flex: 1;                   /* Cada bloque ocupa mismo espacio */
    min-width: 150px;          /* Ancho mínimo para evitar que colapsen */
  }

  /* Footer */
  .footer-simple {
    flex-direction: column;    /* El footer se apila verticalmente */
    text-align: center;        /* Centra su contenido */
    gap: 15px;                  /* Separación entre elementos */
  }

  .social-links {
    display: flex;             /* Íconos en fila */
    justify-content: center;   /* Centrado */
    gap: 15px;                 /* Separación entre íconos */
  }

  
  .hero-logo {
    width: 150px;              /* Reduce tamaño del logo */
  }

  .hero h1 {
    font-size: 22px;           /* Texto más pequeño */
  }

  .hero-subtitle {
    font-size: 14px;           /* Subtítulo más compacto */
  }

  /*Recuadros del personal */
  .junta-grid {
    grid-template-columns: 1fr; /* Cambia a 1 columna */
    padding: 10px;
  }

  .junta-card {
    padding: 16px;             /* Tarjetas más pequeñas */
  }
}

  .creditos-section {
    padding: 25px;
  }
  .marco-personalizado {
    width: 130px;
    height: 130px;
  }
  .marco-personalizado img {
    width: 105px;
    height: 105px;
  }