*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
.container { 
    max-width: 1800px;
    margin:0 auto;
}
.contenido {
    margin-top: 5px; /* ajusta según la altura total de top-bar + menú */
    padding: 20px;
  }
.portada_quienes {
      background-image: url('../img/quienes-somos.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 900px;
      height: 450px;
      margin: 0 auto;
}
.fondo_quienes{ 
    margin-top:180px; 
    width: 60%;
    height:500px;
    background-size: 100%;
}
.logo_asociacion_page { 
    width: 100px;
    height: 100px;
}
.descripcion_quienes{ 
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    color:#858585;
}
.descripcion_quienes p { 
    color:#858585;
    width: 900px;
    line-height: 2.0rem;
    text-align: justify;
    font-size: 18px;;
}
.Titulo_quienes { 
    color:#003752;
    margin-bottom: 30px;
    margin-top: 30px;
    text-transform: uppercase;
    font-size: 40px;;
}
.Mision_Vision { 
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    gap:10rem;
}
.mision h2 ,.vision h2 { 
    color:#003752;
    font-size: 40px;
    font-weight: 200;
    text-align: center;
    margin-bottom: 60px;;
    margin-top: 30px;
}
.mision p ,.vision p{ 
    text-align: center;
    color:#858585;
    width: 350px;
    font-size: 18px;;
    margin-bottom: 60px;;
}
.seccion_objetivos { 
    background-color: #4a4a4a;
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: flex-start;
    gap:4rem;
    padding: 40px 20px;
    flex-wrap: wrap;
}
.lista_objetivos { 
    width: 600px;
    height:500px;
}
.Titulo_Objetivos {
    color: #ECB409;
    text-transform: uppercase;
    font-size: 40px;
    padding: 10px 0;
    margin-bottom: 20px;
}

.list_objetos {
    text-align: justify;
    font-size: 16px;
    list-style-type: disc;
    padding-left: 20px;
}

.lista_objetivos  li {
    line-height:1.8em;
    font-weight: 400;
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#858585;
    font-size: 16px;
    margin-bottom: 10px;

}  
.img_objetivos { 
    width: 500px;
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 8px;
    /* height:500px; */
}
.img_patronato { 
    width: 400px;
    height: 400px;
}
.container_patronato { 
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center; 
    gap:8rem;   

}
.container_valores { 
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center; 
    gap:10rem;   
    padding:50px;
}
.Titulo_Valores { 
    color:#003752;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 200;
}
.lista_valores { 
    color:#858585;
    line-height: 3.0rem;
    z-index: -2;

}
.descripcion_patronato { 
    font-size: 16px;
    color:#858585;
    line-height: 2.5em;
    text-align: justify;
    width: 450px;
    z-index: -2;
}
.descripcion_patronato h2{
    color: #003752;
    font-size: 40px;
    font-weight: 200;
} 
.container-historia { 
    margin-top:50px ;
    display: flex;
    justify-content: center;
    align-items: center; 
    padding: 10px;
    margin-bottom: 20px;
    background-color: #F9F9FA;
}
.titulo_historia h2 { 
    text-align: center;
    margin-bottom: 50px;;
    margin-top: 30px;
    color: #003752;
    font-size: 40px;
    font-weight: 200;
}
.descripcion_historia p { 
    column-count: 2;
    column-gap: 30px;
    width: 1000px;
    text-align: justify;
    font-size: 18px;
    color:#858585;
    padding: 0 20px;

}


.container-historia-manuel { 
    background-color: #4a4a4a;
    color: #858585;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.titulo_con_lineas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #ECB409;
    font-size: 60px;
    font-weight: 400;
}

.titulo_con_lineas::before,
.titulo_con_lineas::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ECB409;
    max-width: 120px;
}
.apellidos_autor{ 
    text-align: center;
    color:#ECB409;
    font-size: 36px;
    font-weight: 200;
    margin-top:-80px;
    margin-bottom:30px;
}
.img_container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.img_manuel {
    width: 240px;
    height: 280px;
    object-fit: cover;
    border-radius: 50%;
}

.historia_manuel { 
    column-count: 2;
    text-align: justify;
    padding: 10px;
    background-color: #4a4a4a;
    color:#858585;
    width: 1000px;
    line-height:1.5rem;
}

    /* 📱 Responsive para tablets */

    @media screen and (max-width: 991px) and (min-width: 751px) {
        .portada_quienes {
            width: 100%;
            height: auto;
            aspect-ratio: 2/1;
        }
        .descripcion_historia p {
            font-size: 15px;
            padding: 0 10px;
            
        }
        .descripcion_quienes p { 
            width: 450px;
            text-align: justify;
            font-size: 16px;
        }

        .titulo_historia h2 {
            font-size: 28px;
        }
       
        .container_patronato,.Mision_Vision{ 
            display: flex;
            flex-direction: column;
            gap:2rem;
        }
     
        .container-historia-manuel { 
            background-color: #4a4a4a;
            color: #858585;
            display: flex;
            justify-content: center;
            padding: 40px 20px;
        }
        
        .titulo_manuel {
            text-align: center;
            margin-top: 30px;
        }
        .apellidos_autor{ 
            text-align: center;
            color:#ECB409;
            font-size: 36px;
            font-weight: 200;
            margin-top:-80px;
            margin-bottom:30px;
        }
        .img_container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .img_manuel {
            width: 240px;
            height: 280px;
            object-fit: cover;
            border-radius: 50%;
        }
        
        .historia_manuel { 
            column-count: 2;
            text-align: justify;
            padding: 10px;
            background-color: #4a4a4a;
            color:#858585;
            width: 1000px;
            line-height:1.5rem;
        }  
        .descripcion_historia p {
            column-count: 1;
            font-size: 16px;
            width: 450px;
        }

        .titulo_historia h2 {
            font-size: 32px;
        }
        .Titulo_Objetivos ,.descripcion_patronato h2 { 
            text-align: center;;
        }
        .historia_manuel {
            width: 100%;
            max-width: 1000px;
        }
    }
 
    
    /* opcional: suaviza en móvil */
    @media screen and (max-width: 750px){
        .portada_quienes {
            width: 100%;
            height: auto;
            aspect-ratio: 2/1;
          }
        .descripcion_quienes p { 
            width: 320px;
            text-align: justify;
            font-size: 15px;
            padding:10px;
        }
  
        .Mision_Vision { 
            display: flex;
            flex-direction: column;
            gap:2rem;
        }
        .container_valores { 
            display: flex;
            flex-direction: column;
            gap:2rem;
        }
        .container_patronato{ 
            display: flex;
            flex-direction: column;
            gap:2rem;
           

        }
        .seccion_objetivos {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .lista_objetivos {
            width: 100%;
            max-width: 90%;
            margin-bottom: 40px;

        }

        .Titulo_Objetivos {
            font-size: 32px;
        }

        .list_objetos {
            font-size: 12px;
            padding-left:20px;
        }

        .img_objetivos {
            width: 90%;
        }
        .img_patronato { 
            width: 380px;
            padding:10px; 
        }
        .descripcion_historia p ,.descripcion_patronato {
            column-count: 1;
            font-size: 16px;
            width: 350px;
            padding:10px;
        }
        .descripcion_patronato li { 
            padding: 10px;
        }

        .titulo_historia h2 {
            font-size: 32px;
        }
        .historia_manuel {  
        
            column-count: 1;
            font-size: 16px;
            width: 320px;
            padding: 10px;

        }

        .apellidos_autor{
            font-size: 20px;
            margin-top: 5px;
        }


    }
    @media screen and (max-width: 750px) {

        .titulo_con_lineas {
            font-size: 32px;
            gap: 10px;
        }
    
        .titulo_con_lineas::before,
        .titulo_con_lineas::after {
            max-width: 60px;
        }
    }