* { 
  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;
  
}


/* 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; 
}

/* Cajas */
.hero-bottom {
  display: flex;
  gap: 20px;
  margin-top: 36px;
  z-index: 1;
  flex-wrap: wrap;                       /* Permite que bajen en pantallas pequeñas */
  justify-content: center;
}


/* Caracteristicas de las cajas/tarjetas*/
.text-block {
  background: rgba(255,255,255,0.95);
  padding: 18px 22px;
  border-radius: 12px;
  border: 2px solid #cc2027;
  width: 300px;
  transition: transform 0.25s ease;      /* Animación al hacer hover */
}

.logros-section {
  text-align: center;/*titulo logros*/
  margin-top: 60px;
  z-index: 1;
}


/* Eleva ligeramente las tarjetas al pasar el mouse */
.text-block:hover {
  transform: translateY(-6px); 
}

/* Título dentro de cada tarjeta */
.text-block h2 { 
  color: #1e79bb;
  margin-bottom: 8px; 
}

/* Párrafo dentro de cada tarjeta */
.text-block p { 
  color: #31393a;
  font-size: 14px; 
}


/*  Misión y Visión */
.mision-vision {
  width: 100%;
  max-width: 1100px;
  margin: 50px auto 80px;
  background: #fff;
  border-radius: 10px;
  padding: 36px;
  z-index: 1;
}

/* Título de la sección */
.mv-title { 
  text-align: center;
  margin-bottom: 26px;
  color: #cc2027;
  font-size: 26px;
}

/* Contenedor que agrupa imagen y texto */
.mision-vision-container { 
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

/* Imagen (lado izquierdo) */
.mision-vision-img img { 
  width: 250px;
  height: auto;
  border-radius: 28px;
  border: 3px solid #1e79bb;
  object-fit: cover;   /* Mantiene proporción */
}

/* Posición imagen y texto*/
.mision-vision-text {
  flex: 1;
  min-width: 300px;
}

/*  Misión y Visión  */
.tabs {
  display: flex;
  gap: 18px;
  position: relative;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f68621;
}

/* Botones de las pestañas */
.tab-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;/*estilo del cursor al pasar por encima del texto misión/visión*/
  color: #31393a;
  padding: 6px 4px;
  position: relative;
}


/* Pestaña activa */
.tab-btn.active { 
  color: #f68621;
  font-weight: 700;
}

/* Línea inferior animada */
.tabs-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: #f68621;
  border-radius: 3px;
  transition: transform 300ms cubic-bezier(.2,.9,.3,1), width 300ms ease;
  
}

/* Contenidos de cada pestaña */
.tab-content {
  display: none; 
}

/* Solo se muestra el contenido activo */
.tab-content.active {
  display: block; 
}

/* Texto dentro del contenido */
.tab-content p { 
  color: #31393a;
  line-height: 1.6;
  margin-bottom: 12px;
}



/*Sección ¿Quiénes Somos? y valores*/
.quienes-somos .titulo-destacado { /*caracteristicas titulos*/
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  text-transform: uppercase;/*Mayusculas los textos*/
  color: #1e79bb;
  font-size: 28px;
  margin-bottom: 16px;
  text-align: center;
  
}

.quienes-somos .intro-texto {/*caracteristicas textos/parrafos*/
  font-family: "Cambria", serif;
  color: #31393a;
  font-size: 16px;
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
  text-align: center;
}

.quienes-cards {
  display: flex;
  justify-content: center;
  align-items: stretch;/*alineacion de los items correspondiente*/
  gap: 25px;
  flex-wrap: wrap;
  margin-bottom: 50px;/*espacio entre los recuadros y el footer*/
}

.quienes-item {
  background: #ffffff;
  border-radius: 14px;
  padding: 26px 22px;
  width: 300px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.quienes-item:hover {
  transform: translateY(-8px);/*movimiento cuadros valores*/
}

.icono {/*recuadro de los valores*/
  background: #f68621;
  width: 64px;
  height: 64px;
  border-radius: 16px;/*borde redondeado*/
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;/*centrar imagenes*/
  align-items: center;
  
  
}

.icono img {/*tamaño imagen recuadro de valores*/
  width: 54px;
  height: 45px;
}

.quienes-item h3 {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  color: #1e79bb;
  font-size: 18px;
  margin-bottom: 10px;
}

.quienes-item p {
  font-family: "Cambria", serif;
  font-size: 14px;
  color: #31393a;
  line-height: 1.5;
}



/* 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);
}




/*Convenios*/

.convenios {
  text-align: center;
  padding: 50px 50px;/*agrega espacio interno dentro de la sección*/
  
}

.convenios h2 {
  font-size: 2rem;
  color: #1e79bb;
  margin-bottom: 40px;
  text-transform: uppercase;/*convierte el texto a mayúsculas*/
  letter-spacing: 2px;
}

.convenios-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;/*deja 30 píxeles de separación entre cada círculo*/
  
}

.convenio {
  width: 120px;
  height: 120px;
  border: 4px solid red;
  border-radius: 50%;
  overflow: hidden;/*oculta todo lo que sobresalga del círculo*/
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*Caracteristicas de las imagenes de los convenios*/
.convenio img {
  object-fit:contain;/*opción mas optima para que las imagenes se acomoden a los circulos*/
}

.logo1 {
  width:85%;
  height: 85%;
}

.logo2 {
  width:98%;
  height: 98%;
}


.logo3 {
  width:105%;
  height: 105%;
}


.logo4 {
  width:105%;
  height: 105%;
}

.logo5 {
  width:98%;
  height: 98%;
}

.logo6 {
  width:93%;
  height: 93%;
}

.logo7 {
  width:105%;
  height: 105%;
}

.logo8 {
  width:125%;
  height: 125%;
}

.logo9 {
  width:103%;
  height: 103%;
}

.convenio:hover {/*Animación al pasar el mouse*/
  transform: scale(1.1); 
}


/*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);
}



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

  html, body {
    margin: 0;              /* elimina márgenes por defecto */
    padding: 0;             /* elimina padding por defecto */
    width: 100%;            /* asegura que ocupe el ancho completo */
    height: 100%;           /* altura completa*/
    overflow-x: hidden;     /* evita scroll horizontal */
  }

  /* oculta el toggler */
  .menu-toggle {
    display: none;          /* oculta el botón de abrir/cerrar menú */
  }

  /* sidebar como barra inferior */
  .sidebar {
    position: fixed;        /* fija el menú para que siempre sea visible */
    bottom: 0;              /* lo pega a la parte inferior */
    top: auto;              /* desactiva posición superior */
    left: 0;                /* lo alinea al borde izquierdo */
    width: 100%;           
    height: 75px;           
    background-color: #012f50; 
    display: flex;          /* activa flexbox */
    justify-content: space-around; /* reparte los iconos de forma pareja */
    align-items: center;    
    padding: 0;             
    border-top: 2px solid #1e79bb;  /* línea superior decorativa */
    z-index: 99;         /* asegura que el menú esté encima de todo */
    overflow: visible;      /* permite mostrar elementos fuera del contenedor */
  }

  /* oculta logo y títulos dentro del sidebar */
  .sidebar .logo,
  .sidebar .logo * {
    display: none;          /* oculta logo y texto en móvil */
    visibility: hidden;     /* asegura que no ocupen espacio */
    height: 0;
    margin: 0;
    padding: 0;
  }

  /* menú horizontal */
  .sidebar .menu,
  .menu {
    display: flex;        
    flex-direction: row;    /* alinea elementos horizontalmente */
    justify-content: space-around; /* espacio entre íconos */
    align-items: center;    
    width: 100%;           
    margin: 0;
    padding: 0;
  }

  /* items del menú */
  .menu .menu-item,
  .menu-item {
    display: flex;          
    flex-direction: column; /* coloca icono arriba y texto abajo */
    align-items: center;   
    justify-content: center;
    flex: 1 1 auto;         /* cada item ocupa espacio igual */
    padding: 4px 6px;       /* espacio interno */
    text-decoration: none;  /* sin subrayado */
    color: #fff;          
    font-size: 12px;      
    gap: 2px;               /* espacio entre icono y texto */
  }

  .menu-item img {
    width: 42px;           
    height: 42px;           
    margin: 0;
    object-fit: contain;    /* mantiene proporciones del icono */
  }

  .menu-item span {
    display: block;         /* asegura que sea un bloque debajo del icono */
    font-size: 12px;       
    line-height: 1;         /* altura mínima */
    margin-top: -8px;        /* separación con el icono */
  }


  /* Ajustes de espacio para el menú */
  main,
  .home-section,
  .content {
    margin-left: 0;              /* elimina espacio lateral */
    width: 100%;                 
    padding-bottom: 95px;        /* deja espacio para barra inferior */
    box-sizing: border-box;      
    position: relative;
    z-index: 1;                  /* contenido por debajo del menú */
  }

  /* Footer y contactos: versión móvil */
  .contacto-parte {
    padding: 20px 10px;          /* menos padding para móvil */
    text-align: center;          /* centra texto en pantallas pequeñas */
  }

  .contacto-contenido {
    display: flex;               /* acomoda elementos en flex */
    flex-direction: column;      /* todo en columna */
    justify-content: center;
    align-items: center;
    gap: 12px;                   /* separación entre elementos */
    padding: 10px;
  }

  .contacto-item { 
    width: 100%;                 /* cada ítem ocupa todo el ancho */
    min-width: 0;                /* evita desbordes horizontales */
  }

  .footer-simple {
    display: flex;               
    flex-direction: column;      /* footer en modo columna */
    justify-content: center;
    align-items: center;
    padding: 16px 10px;
    gap: 8px;
    background-color: #494b4d;  
    position: relative;
    z-index: 1;                  /* por encima del contenido */
    padding-bottom: 80px;        /* espacio para el menú inferior */
  }

  .hero-logo { 
    width: 150px;                /* ajusta tamaño del logo en móvil */
    height: auto;
   }

  .hero h1 { 
    font-size: 22px;             /* tamaño del título en móvil */
  }

  .hero-subtitle { 
    font-size: 14px;             /* subtítulo más pequeño */
  }

}